AngularJS 1.x Directives.docx - AngularJS Introduction AngularJS is a structural framework for dynamic web apps In this course you will learn AngularJS

AngularJS 1.x Directives.docx - AngularJS Introduction...

This preview shows page 1 - 5 out of 25 pages.

AngularJS Introduction AngularJS is a structural framework for dynamic web apps. In this course, you will learn AngularJS architecture Models and controllers Directives and types Form validation Filters Services and types What is AngularJS? This video introduces you to AngularJS. The speaker explains about single-page application, the advantages of AngularJS in building SPA and the core features of AngularJS Linking AngularJS with HTML If you have downloaded AngularJS to your machine, you may include the script from your local machine into the HTML code as follows: <script src="script/angular.js" type="text/javascript"? </script> Following is the way to include script from CDN: <script src=" " type="text/javascript"> </script> Development environment
Image of page 1
You can setup your development environment as follows. 1. An IDE / text editor - Webstorm, Sublime Text, Visual Studio or even a notepad++ 2. node - To compile and run angular project into local install node npm install -g http-server 3. After installation cd into your project folder run http-server -o 4. A browser. Chrome is preferred 5. Git - Version control system. Bootstrapping AngularJS Bootstrapping in AngularJS is just the initialization of Angular app. The ng-app directive indicates which part of the page (either entire HTML page or portion of it) is the root of the Angular application. Angular reads the HTML within that root and compiles it into an internal representation. This reading and compiling is the bootstrapping process . There are two ways of bootstrapping AngularJS. One is Automatic Bootstrapping and the other one is Manual Bootstrapping using a Script. 3 of 8
Image of page 2
AngularJS Scope Scope is an object that refers to the application model. It binds HTML ( view ) and JavaScript( controller ). Every controller has an associated scope*** object. A controller function is responsible for setting model properties and functions. This can be done only through ***scope ∗∗∗ object.Acontrollerfunctionisresponsibleforsettingm odelpropertiesandfunctions.Thiscanbedoneonlythrough ∗∗∗ scop e . Example: <div ng-app="myApp" ng-controller="myCtrl"> <h1>{{carname}}</h1> </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.carname = "Volvo"; }); </script> Automatic Bootstrapping When ng-app directive is added to the root of your application i.e., on the <html> tag or <body> tag, angular is auto-bootstrapped to the application. <html ng-app="myApp"> When AngularJS finds ng-app directive, it loads the module associated with it and then compiles the DOM Manual Bootstrapping In Manual bootstrapping , initialization happens inside the script after your app is created.
Image of page 3
In the following example, the application myApp is bootstrapped after creating the same using angular.module(‘myApp’, [ ]) .
Image of page 4
Image of page 5

You've reached the end of your free preview.

Want to read all 25 pages?

  • Winter '20
  • Document Object Model, AngularJS, ng-app

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture