Download to read offline
Angular JS.pptx
- 1.
- 2. High-level Overview –Angular Process • Angular.js is included and executed. • Angular Module gets created (if added) • Finds ‘templates’: Template – HTML with some angular markup. -> ng – attributes (directives) -> Evaluating expressions. -> Data-binding markup etc.
- 3. High-level Overview –Angular Process (Cont) • Process template - Compiles template (for errors) - Loads template (instance) in memory - Transforms template with data - Data binding - Evaluation of expressions • Renders to DOM tree (View)
- 4. Angular JS -Controllers • Controllers are JS objects which contain application logic. - Usually defined as part of angular module. • Allows us to send/receive data between DOM (say Views) and application logic. • Usually attached to a DOM element ‘ng-controller’ attribute (directive) Gets instantiated ( like emp as o) • In other words, exposes data (Model) to be consumed by views (one-way data binding)
- 5. Wrapping up -Controllers
- 6. Scope in AngularJS • Scope acts as an mediator between controller and View. • Both controller and template have direct access to scope. Data binding and expression evaluations
- 7. Angular “Scope” inController <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.mi n.js"></script> <script type="text/javascript"> var sample = controller(“emp”, function($scope){ $scope.Name =“Jag”; }); </script> </head> <body ng-app =“sample”> <div ng-controllers=“emp”> Hello {{Name}} </div> </body> </html>
Editor's Notes
- #3 Go through of the markup and tried to find all angular components. So we are trying to create a module with the name sample. Basically it is an HTML which is created with angular related components.
- #4 It will compile the template. Transform (evaluation is done expression) Output of the transformation (view)
- #5 Controllers are method. Controller can be attached to the module. Sample.controller (“emp”, function(){ This.Name = “Jag”; }); // sample is module reference Emp (controller provided the name so you will give the name to controller) And function which contains the definition of the controller. And the definition of the controller can be identified with the name emp Also the same module reference is directed to ng-app too. How is controller being attached to our particular block. Using ng-controller’ attribute (directive). As is a keyword Controller is sending information in the form of model straight is to view). But here is discussed single binding.
- #6 Your markup will have all the templates (HTML Angular) that is transformed into view. Controller is sending information to the view in the form of model (as input data). Controllers receiving and working with the data closely with the web services. Pull the data and convert the data into model and send to views. And web services know how to work with DB.
- #7 Scope is context sits in a memory which is directly associated with respect to element (such as div) declared as ng-controller and entire scope is hidden from UI. Div can directly access to memory. Div is view and the model is info stored in scope and controller will update the view. Controller and template or view has direct access to scope It is just like a view. If controller wants to send some data to view it sends through scope. And vice verse. // template: ng-controller basically finds the controller name. It will create the scope object and then controller instance and then merges the scope object into the instance. Controller instance will have its own information. So basically we are working with the scope. When controller wants to send anuy information to view it has to go with scope and vice versa. Controller sends the information to scope and vice versa Views sends the info to scope and vice versa. So scope can evaluate the angular expression that is Name here.