Overview of the AngularJS framework
8 likes3,086 views
This document covers the fundamentals of AngularJS within the context of modern web development for Java programmers. It explains the differences between frameworks and libraries, outlines the structure of single-page applications, and provides practical examples of AngularJS features such as modules, controllers, directives, and routing. Additionally, it discusses essential tools for JavaScript development, including Node.js, npm, Yeoman, Bower, and Grunt, highlighting their roles in managing application dependencies and automating tasks.
![© 2015 Farata Systems
Module Usages
// Create a new module
var auction = angular.module('auction', []);
// Get an existing module
var auction = angular.module('auction');
// Create a module that dependents on ngRoute
var auction = angular.module('auction', ['ngRoute']);
// Adding routing support
<script src="angular-route.js"></script>
21
When Angular loads it creates one variable angular on the
global scope.](https://image.slidesharecdn.com/angularforjavadevsunit2-151210115347/85/Overview-of-the-AngularJS-framework-21-320.jpg)
![© 2015 Farata Systems
Module, Controller, Model, and Filter
<!DOCTYPE html>
<html ng-app="auction">
<head lang="en">
<meta charset="UTF-8">
<title>Unit 2. Walkthrough 3.</title>
</head>
<body ng-controller="IndexController">
<p>Type here: <input type="text" ng-model="model.message"/></p>
<p>Should appear: <strong>{{ model.message | uppercase }}</strong></p>
<script src="angular.js"></script>
<script src="w3.js"></script>
</body>
</html>
var auction = angular.module('auction', []);
auction.controller('IndexController', function ($scope) {
$scope.model = {
message: 'Initial message'
};
});
Module name
Binding Expression
Inject scope
into controller
Create module w3.js
Filter
index.html
Controller name
Create controller](https://image.slidesharecdn.com/angularforjavadevsunit2-151210115347/85/Overview-of-the-AngularJS-framework-22-320.jpg)
![© 2015 Farata Systems
How to use a controller
'use strict';
(function () {
var MainController = function ($scope) {
$scope.awesomeThings = [
'HTML5 Boilerplate',
'AngularJS',
'Karma'];
};
angular.module('store').controller('MainController', MainController);
})();
<div ng-controller=“MainController”>
<ul>
<li ng-repeat="aThing in awesomeThings">{{ aThing }}</li>
</ul>
</div>
A scope shares variables
between view and controller
A new variable aThing is created for each ng-repeat iteration](https://image.slidesharecdn.com/angularforjavadevsunit2-151210115347/85/Overview-of-the-AngularJS-framework-24-320.jpg)
![© 2015 Farata Systems
Routing
• Enables deep-linking for single-page applications
• Uses the fragment identifier #, doesn’t reload the page
• Supports HTML5 History API as well as “hashbang” (/#!)
• Is represented as $route service:
• Maps URLs to views (HTML templates) and controllers
angular.module(‘ngRoute', ['ng']).provider('$route', $RouteProvider);
Lives in a separate module
Registered with provider(), hence
$routeProvider is available at configuration phase](https://image.slidesharecdn.com/angularforjavadevsunit2-151210115347/85/Overview-of-the-AngularJS-framework-30-320.jpg)
![© 2015 Farata Systems
$routeProvider
• Allows configuring mapping at configuration phase
angular.module('auction', ['ngRoute'])
.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/home.html',
controller: 'HomeController'
})
.when('/search', {
templateUrl: 'views/search.html',
controller: 'SearchController'
})
.otherwise({
redirectTo: '/'
});
}]);
Added as dependency to the app
Config phase
One-to-one mapping
Path to a partial view (HTML template)
Controller’s name as it’s registered
in the DI container
Default route
Never contains “hashbang"](https://image.slidesharecdn.com/angularforjavadevsunit2-151210115347/85/Overview-of-the-AngularJS-framework-31-320.jpg)
![© 2015 Farata Systems
Filter Example
<span>{{ names | joinData : ', ' }}</span>
angular.module(‘auction').filter('joinData',
(array, separator) => array.join(separator));
var names = ['John', 'Mike', 'Kate'];
‘John, Mike, Kate’
33
Filter name
Filter implementation](https://image.slidesharecdn.com/angularforjavadevsunit2-151210115347/85/Overview-of-the-AngularJS-framework-33-320.jpg)
![© 2014 Farata Systems
A sample Gruntfile.js
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
options: {
separator: ';'
},
dist: {
src: ['src/**/*.js'],
dest: 'dist/<%= pkg.name %>.js'
}
},
qunit: {
files: ['test/**/*.html']
},
watch: {
files: ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js'],
tasks: ['qunit']
}
});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-qunit');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('test', ['qunit']);
grunt.registerTask('default', ['qunit', 'concat']);
};
Node.js way to
encapsulate modules
Initializes grunt configuration
Read configs from package.json
Task’s configuration.
Has the same name as task.
Common name for all tasks
A unique set of available options
for each taskTarget can have
an arbitrary name
<%= %> - refers to a property in the config
<% %> - executes arbitrary JavaScript code
Loads the plugin installed with npm
Creates a custom task available
in the command-line
A default grunt task(s)
51
will be reviewed during the walkthrough 3](https://image.slidesharecdn.com/angularforjavadevsunit2-151210115347/85/Overview-of-the-AngularJS-framework-51-320.jpg)
![© 2015 Farata Systems
Files
• Most Grunt tasks operate on files
• Grunt supports several source/destination formats:
dist: {
src: ['src/bb.js', 'src/bbb.js'],
dest: 'dest/b.js'
}
dist: {
src: ['src/bb.js', 'src/bbb.js'],
dest: 'dest/b.js'
}
Compact format
Files Object Format
dist: {
files: {
'dest/a.js': ['src/aa.js', 'src/aaa.js'],
'dest/a1.js': ['src/aa1.js', 'src/aaa1.js']
}
}
Compact format
less: {
dist: {
files: [{
expand: true,
cwd: '<%= yeoman.app %>/styles',
src: '{,*/}*.less',
dest: '.tmp/styles',
ext: '.css'
}]
}
}
Example from auction app
52
will be reviewed during the walkthrough 3](https://image.slidesharecdn.com/angularforjavadevsunit2-151210115347/85/Overview-of-the-AngularJS-framework-52-320.jpg)
Overview of the AngularJS framework
- 1. © 2015 Farata Systems Modern Web Development for Java Programmers Unit 2. AngularJS Basics. Becoming Productive with JavaScript. Video recording of this session: http://bit.ly/1NHV3Wd
- 2. © 2015 Farata Systems Overview of JavaScript Frameworks
- 3. © 2015 Farata Systems Why use HTML5 frameworks • They deal with cross-browser compatibility • Make your application more structured • May include reusable components • Make programmers more productive • Lower the amount of manually written code
- 4. © 2015 Farata Systems Frameworks vs Libraries Frameworks expect you to programs using well defined rules. Libraries just offer reusable components. There are two major types of frameworks: • Feature complete • Lightweight (MVC + Binding + Routing)
- 5. © 2015 Farata Systems Feature Complete Frameworks • Suitable for back-office applications • Include a library of UI components • Have good tooling • Steeper learning curve • May be difficult to customize • Typicallt the size of the app is more than 1MB
- 6. © 2015 Farata Systems Lightweight Frameworks • Mainly deal with application structure, navigation, AJAX • Work best for consumer-oriented websites • Can be combined with 3-party libraries • Easier to learn
- 7. © 2015 Farata Systems Single-Page Applications (SPA) • No full Web page reloads • Only certain portions of the page get refreshed • The state of a Web page doesn’t get reset • The user gets a feel of a desktop app • Search Engine Optimization (SEO) may suffer
- 8. © 2015 Farata Systems Gmail: a Single Page Application
- 9. © 2015 Farata Systems Professional SPA features • Modularization • Controllers handles DOM manipulations and AJAX • HTML templating • Routing with deep linking • Real time communication via Web sockets • Use of HTML5 Local storage Read more about SPA at https://en.wikipedia.org/wiki/Single-page_application
- 10. © 2015 Farata Systems AngularJS https://angularjs.org
- 11. © 2015 Farata Systems Why AngularJS? • Pros: • Good choice for single-page applications • MVC with minimal coding • Easy routing • Lightweight, yet pluggable with well-defined modular architecture • Develped by Google • Cons: developed by Google
- 12. © 2015 Farata Systems Hello World <!DOCTYPE html> <html> <head > <title>Hello World</title> </head> <body ng-app> <h1> This is just a Hello World HTML</ h1> <div> <h2> Hello from div</h2> </div> <script src="angular.js" /> </body> </html> An AngularJS directive
- 13. © 2015 Farata Systems MVC in Angular App Controller View Model User sees initiates actions modifies html ng-controller ng-model updates via binding ng-app productName description bid price … productName description bid price $scope informs controller
- 14. © 2015 Farata Systems MVCS Controller View Model User 1. Sees 4. Modifies html ng-controller ng-model 6. Updates via binding ng-app productName description bid price … Services The server-side tier productName description bid price $scope 2. Initiates actions 3. Informs controller 5. HTTP or WebSocket communications 7. Sees
- 15. © 2015 Farata Systems Two-way Binding HTML template View Change in View updates Model <p>{{ productName }}</p> Compiles Model Change in Model updates View
- 16. © 2015 Farata Systems A Simple AngularJS App • Single HTML file: <!DOCTYPE html> <!-- STEP 2: Bootstrap AngularJS --> <html ng-app> <head lang="en"> <meta charset="UTF-8"> <title>Unit 2. Walkthrough 2.</title> </head> <body> <!-- STEP 3: Define a new variable in the root scope. --> <p>Type here: <input type="text" ng-model="message"/></p> <!-- STEP 4: Add data binding to the "message" variable. --> <p>Should appear: <strong>{{ message }}</strong></p> <!-- STEP 1: Add AngularJS dependency. --> <script src="angular.js"></script> </body> </html> Defines the scope of controlled by AngularJS Creates a variable message in the model Binds a view to a variable from the model
- 17. © 2015 Farata Systems Walkthrough 1Install AngularJS plugin according to the instructions from the file prerequisites.txt. Unzip the file with handouts and create an empty IDEA project in the same directory. Import the module unit2.iml according to instructions from import_code_manual. Ignore the excluded folders warnings. Use directory walkthroughs/w1 from the handouts as the starting point. Open w1.html file in the IDEA’s editor: 1. Include AngularJS library using <script> tag: <script src="angular.js"></script> 2. Bootstrap AngularJS app by adding ng-app directive to <html> tag: <html ng-app>. 3. Define a new variable in the root scope and enable two-way data-binding for the input element as using ng-model directive: <input type="text" ng-model="message"/> 4. Inside the <strong> element add data-binding to the message variable: <strong>{{ message }}</strong> 5. Open w1.html file in Chrome browser and see if the binding works. 6. Compare Angular and pure JavaScript versions in the solutions directory. Select w1.html and w1_pureJS.html, right- click, and select Compare Two files. You should see the output shown on next slide. 7.Review all code samples from the folder walkthroghs/w1-solutions.
- 18. © 2015 Farata Systems Walkthrough 1: Comparing Angular and JavaScript versions w1-solution/w1.html w1-solution/w1_JS.html
- 19. © 2015 Farata Systems Angular Players • Modules - each app consists of one or more modules • Controllers - handle user interactions, orchestrate models and services • Directives - assign custom behavior to HTML elements • Filters - format the expression’s value • Binding Expressions - code snippets placed in curly braces within HTML template
- 20. © 2015 Farata Systems Modules • Help avoiding monolithic applications • Angular istelf is split into modules (see http://ngmodules.org). The file angular.js is a module with core functionality. • Split one JS file into several files • Allow to specify dependencies • Can be loaded in any order or in parallel 20
- 21. © 2015 Farata Systems Module Usages // Create a new module var auction = angular.module('auction', []); // Get an existing module var auction = angular.module('auction'); // Create a module that dependents on ngRoute var auction = angular.module('auction', ['ngRoute']); // Adding routing support <script src="angular-route.js"></script> 21 When Angular loads it creates one variable angular on the global scope.
- 22. © 2015 Farata Systems Module, Controller, Model, and Filter <!DOCTYPE html> <html ng-app="auction"> <head lang="en"> <meta charset="UTF-8"> <title>Unit 2. Walkthrough 3.</title> </head> <body ng-controller="IndexController"> <p>Type here: <input type="text" ng-model="model.message"/></p> <p>Should appear: <strong>{{ model.message | uppercase }}</strong></p> <script src="angular.js"></script> <script src="w3.js"></script> </body> </html> var auction = angular.module('auction', []); auction.controller('IndexController', function ($scope) { $scope.model = { message: 'Initial message' }; }); Module name Binding Expression Inject scope into controller Create module w3.js Filter index.html Controller name Create controller
- 23. © 2015 Farata Systems Controller • Handles user interactions • Creates the model on the $scope object • Receives control during routing • Never manipulates the view directly • A view can have multiple controllers
- 24. © 2015 Farata Systems How to use a controller 'use strict'; (function () { var MainController = function ($scope) { $scope.awesomeThings = [ 'HTML5 Boilerplate', 'AngularJS', 'Karma']; }; angular.module('store').controller('MainController', MainController); })(); <div ng-controller=“MainController”> <ul> <li ng-repeat="aThing in awesomeThings">{{ aThing }}</li> </ul> </div> A scope shares variables between view and controller A new variable aThing is created for each ng-repeat iteration
- 25. © 2015 Farata Systems Scope • Shares variables between view and controller • A place where the model data are visible • One $rootScope is implicitly created for the entire app • Child $scope objects are created for controllers and directives (e.g. ng-controller, ng-repeat) • If a variable isn’t found in the child scope, AngularJS looks in the prototypal chain of scopes.
- 26. © 2015 Farata Systems Directives • Attach behaviour to the DOM elements • Can have visual and non-visual effects (ng-controller vs ng-repeat) • Directives offer: ‣ UI decomposition ‣ Reusable components 26
- 27. © 2015 Farata Systems Directive Usages • Directives can be represented in several forms: ‣ HTML element’s attribute: ng-app, data-ng-app ‣ HTML element’s: <auction-navbar> ‣ CSS classes <div class=“auction-navbar”> 27
- 28. © 2015 Farata Systems Walkthrough 2 Developing Online Auction in Angular
- 29. © 2015 Farata Systems Walkthrough 2 • In this walkthrough we will use AngularJS to develop the Auction Home and Search pages. We’ll use the $http object to read the data from the json files. • Here we’ll implement navigation between Auction Home and Search pages without using routing. We’ll get the same functionality as in the Homework but using AngularJS directives: • ng-init - to declare and initialize a variable on the current scope • ng-include - to download HTML template, apply the data to the template and insert generated markup inside the HTML element it’s attached to • Use the directory walkthroughs/w2 as the starting point. • Open walkthrough_2_guide.html file from the handouts and follow the instructions.
- 30. © 2015 Farata Systems Routing • Enables deep-linking for single-page applications • Uses the fragment identifier #, doesn’t reload the page • Supports HTML5 History API as well as “hashbang” (/#!) • Is represented as $route service: • Maps URLs to views (HTML templates) and controllers angular.module(‘ngRoute', ['ng']).provider('$route', $RouteProvider); Lives in a separate module Registered with provider(), hence $routeProvider is available at configuration phase
- 31. © 2015 Farata Systems $routeProvider • Allows configuring mapping at configuration phase angular.module('auction', ['ngRoute']) .config(['$routeProvider', function ($routeProvider) { $routeProvider .when('/', { templateUrl: 'views/home.html', controller: 'HomeController' }) .when('/search', { templateUrl: 'views/search.html', controller: 'SearchController' }) .otherwise({ redirectTo: '/' }); }]); Added as dependency to the app Config phase One-to-one mapping Path to a partial view (HTML template) Controller’s name as it’s registered in the DI container Default route Never contains “hashbang"
- 32. © 2015 Farata Systems Filters • Transform an expression value • Can be used in HTML and directly invoked from code • Take at least one parameter - the value to transform • Can take arbitrary number of parameters 32
- 33. © 2015 Farata Systems Filter Example <span>{{ names | joinData : ', ' }}</span> angular.module(‘auction').filter('joinData', (array, separator) => array.join(separator)); var names = ['John', 'Mike', 'Kate']; ‘John, Mike, Kate’ 33 Filter name Filter implementation
- 34. © 2015 Farata Systems Identifying the View • The routing module needs to know where to display the HTML fragment • Add attribute marked with ng-view inside the HTML element • Declare a single ng-view for the entire app • ng-view is always in sync with the URL according to $routeProvider’s mapping <div class="container" ng-view></div>
- 35. © 2015 Farata Systems How Navigate to a Route? • Clicking on a link (# used to prevent page reloading): <a href="#/search">Submit</a> • Using $location service: $location.url('/search'); • Changing a path fragment may require modifications in multiple places. AngularUI has more flexible ui-router component.
- 36. © 2014 Farata Systems Tools
- 37. © 2015 Farata Systems The Tools We Use • node.js - JS framework plus a runtime for all development tools listed below. • npm - node package manager used for installing and managing development tools • yeoman - a scaffolding tool used to generate the initial structure of an application • bower - package manager for your application dependencies (front-end) • grunt - a build automation tool
- 38. © 2015 Farata Systems
- 39. © 2015 Farata Systems Node.js • A frameworks and a platform for executing JavaScript code outside the web browser • Built on top of Chrome’s JavaScript engine - V8 • Uses event-driven non-blocking I/O model • Allows writing server-side JavaScript applications that access files, support TCP, UDP, HTTP, SSL, and compression. • We will use Node.js as a runtime for JavaScript development tools • Has pre-built installers for all popular platforms at nodejs.org/download/
- 40. © 2015 Farata Systems npm • npm is a Node.js package manager for development- tools and their dependencies • Has a repository of 50K+ packages at https://www.npmjs.org • To run, type npm in the command window
- 41. © 2015 Farata Systems package.json • package.json is a json-formatted file where we configure npm dependencies. • You can configure two types of dependencies in package.json: ‣ dependencies - packages needed for publishing your app in the npm registry ‣ devDependencies - packages that are used only during development only (e.g. grunt, development web server, etc.) • To install all dependencies listed in package.json: npm install • To install a new dependency (e.g. grunt-ts) locally: npm install grunt-ts • To install a new dependency globally: npm install -g grunt-ts • Use --save and --save-dev to automatically update package.json along with installing a new package.
- 42. © 2015 Farata Systems A package.json Example List all development dependencies for the auction app: { "name": "auction", "version": "0.1.0", "dependencies": {}, "devDependencies": { "grunt": "^0.4.2", "grunt-concurrent": "~0.4.1", "load-grunt-tasks": "0.2.1" } } Specific version: 0.2.1 “Reasonably close”: >=0.4.1-0 <0.5.0-0 >=0.4.2-0 <1.0.0-0
- 43. © 2014 Farata Systems 43
- 44. © 2015 Farata Systems Yeoman • A scaffolding tool for generating the initial project structure. • It’s an npm package and is installed with npm install -g yo • Has a rich collection of generators at http://yeoman.io/generators • To install the angular generator: npm install -g generator-angular • To run, type yo with parameter in the command window without the generator- prefix, e.g.: yo angular 44
- 45. © 2015 Farata Systems Bower • Bower is a package manager for the application dependencies • Package can have any layout and any type of assets. • Configuration is specified in the file bower.json. • There is a huge collection of packages controlled by Bower at http:// bower.io/search • To install bower globally: npm install -g bower • To run, type bower in the command window, and it’ll use configurations specified in the file bower.json. 45
- 46. © 2015 Farata Systems Bower Configuration: bower.json • bower.json describes the application’s package. We’ll use json propertied to configure application dependencies. • Two types of dependencies: ‣ dependencies - packages needed for production version of the app ‣ devDependencies - packages needed only during development (e.g. unit testing libraries) • To install all dependencies listed in bower.json: bower install • To install a new dependency: bower install angular-resource • Use --save and --save-dev to automatically update bower.json along with installing a new package. 46
- 47. © 2015 Farata Systems Bower: version ranges The complete list of versions is at: https://docs.npmjs.com/misc/semver#Ranges { "name": "auction", "version": "0.1.0", "dependencies": { "angular": "1.2.14", "angular-route": "~1.2.14", "bootstrap": "^3.1.1" }, "devDependencies": { "DefinitelyTyped": "*" } } The exact version 1.2.14 >=1.2.14-0 <1.3.0-0 >=3.1.1-0 <4.0.0-0 any version 47
- 48. © 2014 Farata Systems 48
- 49. © 2015 Farata Systems Grunt • Grunt is a build automation tool for web apps • Grunt is configured as a dependency in npm’s package.json • We need to install command-line interface to grunt: npm install -g grunt-cli • To run, type grunt in the command window • Grunt plugins are installed with npm: npm install grunt-ts —-save-dev 49
- 50. © 2015 Farata Systems Grunt Configuration: Gruntfile.js • A JavaScript that loads Grunt plugins containing tasks • Defines all configurations for tasks that Grunt can execute • Each task can be invoked separately with grunt task • A task consists of targets, and you can optionally run just a target: grunt task:target 50
- 51. © 2014 Farata Systems A sample Gruntfile.js module.exports = function(grunt) { grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), concat: { options: { separator: ';' }, dist: { src: ['src/**/*.js'], dest: 'dist/<%= pkg.name %>.js' } }, qunit: { files: ['test/**/*.html'] }, watch: { files: ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js'], tasks: ['qunit'] } }); grunt.loadNpmTasks('grunt-contrib-concat'); grunt.loadNpmTasks('grunt-contrib-qunit'); grunt.loadNpmTasks('grunt-contrib-watch'); grunt.registerTask('test', ['qunit']); grunt.registerTask('default', ['qunit', 'concat']); }; Node.js way to encapsulate modules Initializes grunt configuration Read configs from package.json Task’s configuration. Has the same name as task. Common name for all tasks A unique set of available options for each taskTarget can have an arbitrary name <%= %> - refers to a property in the config <% %> - executes arbitrary JavaScript code Loads the plugin installed with npm Creates a custom task available in the command-line A default grunt task(s) 51 will be reviewed during the walkthrough 3
- 52. © 2015 Farata Systems Files • Most Grunt tasks operate on files • Grunt supports several source/destination formats: dist: { src: ['src/bb.js', 'src/bbb.js'], dest: 'dest/b.js' } dist: { src: ['src/bb.js', 'src/bbb.js'], dest: 'dest/b.js' } Compact format Files Object Format dist: { files: { 'dest/a.js': ['src/aa.js', 'src/aaa.js'], 'dest/a1.js': ['src/aa1.js', 'src/aaa1.js'] } } Compact format less: { dist: { files: [{ expand: true, cwd: '<%= yeoman.app %>/styles', src: '{,*/}*.less', dest: '.tmp/styles', ext: '.css' }] } } Example from auction app 52 will be reviewed during the walkthrough 3
- 53. © 2015 Farata Systems Typical Workflow • npm install • bower install • grunt build 53
- 54. © 2014 Farata Systems Walkthrough 3 Reimplementing the Home Page using tools 54 Open walkthrough_3_guide.html and follow instructions.
- 55. © 2015 Farata Systems Frequently used AngularJS services • $scope - access to the current scope • $rootScope - access to the root scope • $http - HTTP requests • $location - to work with window.location • $window - to access window object
- 56. © 2015 Farata Systems AngularJS directives you’ll need for the homework • ng-app - determines the scope of AngularJS app and automatically bootstraps the app • ng-view - tells AngularJS which HTML element should be used to include the rendered view while navigating using routing service • ng-repeat - iterates through a collection of objects, instantiates a template it’s attached to once per item
- 57. © 2015 Farata Systems Homework 2 Refactor the auction app to use routing instead of ngInit and ngInclude directives to navigate among the pages. Use directory homework2 from the handouts as the starting point. 1. Add the angular-route library as a dependency to bower.json. Run bower install to download the library locally. Run grunt wiredep to add the reference to the library angular-route into index.html. 2. Open app/scripts/app.js and add ngRoute module as a dependency for the main application module auction. Configure $routeProvider as shown in the slide $routeProvider but use your own templateUrl and controller values. Use controllerAs option to automatically expose controller’s fields and methods on the scope. 3. Open app/views/index.html file and replace ngInit and ngInclude directives with ngView directive. Replace ngClick with ngHref directives for Search button and brand name link that we use for navigation. ngHref should have correct value as we discussed in How Navigate to a Route section. 4. Run grunt build command. It’ll generate the dist directory in the root directory of your app. Deploy the content of dist at GitHub Pages. 5. Send your homework (2 URLs: link to GitHub repository with the source code and a link to the app deployed to GitHub Pages) to [email protected]. Read the documentation about all the AngularJS directives used during the class and in the homework. Read about grunt plugins we used to configure our app. You can find each plugin by its name in npmjs.org registry.
- 58. © 2015 Farata Systems Additional Resources • AngularJS Developer Guide - http://docs.angularjs.org/guide • A collection of articles - http://www.ng-newsletter.com/posts/ • A collection of AngularJS learning resources - https://github.com/ jmcunningham/AngularJS-Learning • AngularJS Google style guide (disregard the Google Closure part) • AngularJS community style guide • Our upcoming trainings: http://faratasystems.com