This tutorial shows how to clone a Git project from the Git repository and set it up to use Angular.js with node.js and Gulp automation, this asumes that the project uses this workflow and GIt and node are not installed on the local machine.
1) Install Git
2) install node.js
3) Open Gitbash and type git –version ,this will tell you that git is installed and the version number.
4) type node –version ,this will tell you that node is installed and the version number.
5) On windows cd to the desktop to clone a repository there.
type git clone -b start http;// path to repository to clone the repository to the desktop omit the -b modifier if the clone is not a branch.
Install the node plugins
6) cd to the projects route folder, desktop/my project
Type npm install ,this should create a node modules folder in the projects route folder.
Install Gulp automation – this asumes that the cloned project has been setup to use gulp, look for a gulpfile.js file . this is the config file for automation
7) Type npm install -g gulp Type gulp to start the automation.
Angular uses two way data binding that can cause cross origin domain sharing problems with the browser. To avoid this problem Gulp provides a local web server that can be automated to open when a file is saved,usually the index file. Otherwise the project would have to be uploaded to a live server to do any testing.
The config file sets up automation tasks see below.You can see that the webserver is set to open the index file, on line 28.
var gulp = require('gulp'),
gutil = require('gulp-util'),
webserver = require('gulp-webserver');
gulp.task('js', function() {
gulp.src('builds/development/js/**/*')
});
gulp.task('html', function() {
gulp.src('builds/development/*.html')
});
gulp.task('css', function() {
gulp.src('builds/development/css/*.css')
});
gulp.task('watch', function() {
gulp.watch('builds/development/js/**/*', ['js']);
gulp.watch('builds/development/css/*.css', ['css']);
gulp.watch(['builds/development/*.html',
'builds/development/views/*.html'], ['html']);
});
gulp.task('webserver', function() {
gulp.src('builds/development/')
.pipe(webserver({
livereload: true,
open: true
}));
});
gulp.task('default', ['watch', 'html', 'js', 'css', 'webserver']);Add the angular files to the head of the index page
The Angular files are in the js folder and then in the libs folder.
<script src="/js/lib/angular/angular.min.js"></script> <script src="/js/lib/angular/angular-route.min.js"></script> <script src="/js/lib/ang
Test that angular.js and automation is working
Add the ng-app directive to the HTML element this is the “hook” that angular use to access the DOM.
<html lang="en" ng-app="myApp">
Create the main module for the app, every app is a module with an app.js config file.
Create the app.js file and make sure that it is included in the head of the index page.
To make a single page app you need to create a nav menu and provide a route controller to define which view to use with each link.
to make a link to open a view :
<li><a ng-href="#/about">About</a></li><br><br>
in the app.js file define the route to the view that will open with that link:
museumBase.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/about', {
templateUrl: 'views/about.html',
}).
otherwise({
redirectTo: '/login'
});
}]);