More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (13)
Similar to Angular JS Basics.
Similar to Angular JS Basics. (20)
Recently uploaded
Recently uploaded (20)
Angular JS Basics.
- 1. Building Modern Web Apps with ANGULARJS
- 2. ● Node Package Manager (NPM). ○ https://nodejs.org/en/download/ ● Grunt, Yeoman, Bower ○ http://grunt.io/ ○ http://yeoman.io/ ○ http://bower.io/ ● HTML5 template. ○ http://www.initializr.com/ Tools set
- 3. ● npm install -g yo ● npm install -g bower ● npm install -g grunt-cli ● yo ● grunt serve Initializing
- 5. Modules and Controllers angular.module(‘moduleName’,[dependencies]); angular.module('moduleName') .controller('controllerName', function () { this.attributeName=”value”; });
- 7. Expressions [example] <body ng-app="blogApp"> .... <div ng-controller="BlogCtrl as blog"> <h1>{{blog.title}}</h1> </div> .... </body>
- 8. Expressions [example 2] <body ng-app="blogApp"> .... <div ng-controller="BlogCtrl as blog"> <h1>{{blog.title}}</h1> <input type="text" ng-model="blog.title" value="GDG"/> </div> .... </body>
- 9. Routes angular.config(function ($routeProvider) { $routeProvider .when('/', { templateUrl: 'views/main.html', controller: 'MainCtrl', controllerAs: 'main' }) .when('/about', { templateUrl: 'views/about.html', controller: 'AboutCtrl', controllerAs: 'about' }) .otherwise({ redirectTo: '/' }); });
- 10. Views and templates <body ng-app="blogApp"> .... <div class="container"> <div ng-view=""></div> </div> .... </body>
- 11. Directives ng-repeat <body ng-app="blogApp"> .... <div ng-controller="BlogCtrl as blog"> <h1 ng-repeat="posts as post">{{post.title}}</h1> </div> .... </body>
- 12. Services angular.module('moduleName') .service('serviceName', function() { this.functionName=function(text){ return "Hello"; }; });
- 13. Services [Example] angular.module('blog') .service('postService', function() { this.getPosts=function(){ return(Json); }; });