AngularJS Introduction, how to run Angular
SamuelJohnpeter
7 views
18 slides
May 17, 2024
Slide 1 of 18
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
About This Presentation
AngularJS PPT
Slide Content
AngularJS
JAVASCRIPT FRAMEWORK A JavaScript framework is a collection of JavaScript code libraries that provide a web developer with pre-written code for routine programming tasks. Frameworks are structures with a particular context and help you create web applications within that context. It is completely possible to build strong web applications without JavaScript frameworks, but frameworks provide a template that handles common programming patterns. Each time you have to build an application, you don’t need to write code for every single feature from scratch. Instead, you can build upon an existing feature set. JavaScript frameworks, like most other frameworks, provide some rules and guidelines. Using these rules and guidelines, any developer can make complex applications faster and more efficiently than if they decided to build from scratch. The rules and guidelines help shape and organize your website or web application too!
For example, think about a potter’s wheel where you can build pots. The potter’s wheel is your framework; it has certain consistencies that you have to work with. The wheel rotates, and you can use that rotation to build pots of different shapes and sizes. You can build pots, plates, cups, bowls, or even cylindrical sculptures. But you can’t build a house with it; you need to find a different framework for that.
MODEL VIEW CONTROLLER (MVC) Modern JavaScript frameworks use a software design pattern called Model–View–Controller. It is commonly used for developing user interfaces that divide related programming logic into three interconnected elements. The model is the central web component of the pattern as it is the application’s dynamic data structure. It manages the data of the application. The view consists of all the code that has to do with representing the application’s data — the code for the user interface. The controller is the interpreter. It accepts inputs and converts them into commands for the model or view. Frameworks are built around the MVC design pattern to provide structure and adaptability in software development.
MVC Architecture
POPULAR JAVASCRIPT FRAMEWORKS JavaScript is one of the most popular and widely used programming languages globally and has more frameworks than any other language. Since JavaScript is used for both client-side and server-side code, there are many frameworks to work with. Some of the most popular frameworks include:
AngularJS Introduction AngularJS is a JavaScript framework . It can be added to an HTML page with a <script> tag. AngularJS extends HTML attributes with Directives , and binds data to HTML with Expressions . AngularJS is a JavaScript framework written in JavaScript . AngularJS is distributed as a JavaScript file, and can be added to a web page with a script tag: <script src ="https://ajax.googleapis.com/ajax/libs/ angularjs /1.6.9/angular.min.js"></script>
AngularJS Extends HTML AngularJS extends HTML with ng-directives . The ng-app directive defines an AngularJS application. The ng-model directive binds the value of HTML controls (input, select, textarea ) to application data. The ng-bind directive binds application data to the HTML view.
Creating AngularJS Application Step 1: Load framework Being a pure JavaScript framework, it can be added using <Script> tag. <script src = "https://ajax.googleapis.com/ajax/libs/ angularjs /1.3.14/angular.min.js"></script> Step 2: Define AngularJS application using ng-app directive <div ng-app = ""> ...</div> Step 3: Define a model name using ng-model directive <p>Enter your Name: <input type = "text" ng-model = "name"></p> Step 4: Bind the value of above model defined using ng-bind directive <p>Hello <span ng-bind = "name"></span>!</p> Executing AngularJS Application Use the above-mentioned three steps in an HTML page.
AngularJS Example <!DOCTYPE html> <html> <script src ="https://ajax.googleapis.com/ajax/libs/ angularjs /1.6.9/angular.min.js"></script> <body> <div ng-app=""> <p>Name: <input type="text" ng-model="name"></p> <p ng-bind="name"></p> </div> </body> </html>
Example explained: AngularJS starts automatically when the web page has loaded. The ng-app directive tells AngularJS that the <div> element is the "owner" of an AngularJS application . The ng-model directive binds the value of the input field to the application variable name . The ng-bind directive binds the content of the <p> element to the application variable name .
AngularJS - Directives AngularJS directives are used to extend HTML. They are special attributes starting with ng -prefix. Let us discuss the following directives − ng-app − This directive starts an AngularJS Application. ng- init − This directive initializes application data. ng-model − This directive defines the model that is variable to be used in AngularJS. ng-repeat − This directive repeats HTML elements for each item in a collection.
AngularJS - Expressions Expressions are used to bind application data to HTML. Expressions are written inside double curly braces such as in {{ expression}}. Expressions behave similar to ngbind directives. AngularJS expressions are pure JavaScript expressions and output the data where they are used . Using numbers <p>Expense on Books : {{cost * quantity}} Rs </p> Using Strings <p>Hello {{ student.firstname + " " + student.lastname }}!</p> Using Object <p>Roll No: {{ student.rollno }}</p> Using Array <p>Marks(Math): {{marks[3]}}</ p>
<html> < head> < title>AngularJS Expressions</title> </ head> <body> <h1>Sample Application</h1> < div ng-app = "" ng- init = "quantity = 1;cost = 30; student = {firstname:'Mahesh',lastname:'Parashar',rollno:101 }; marks = [80,90,75,73,60 ]"> < p>Hello {{ student.firstname + " " + student.lastname }}!</p> <p>Expense on Books : {{cost * quantity}} Rs </p > <p>Roll No: {{ student.rollno }}</p> <p>Marks(Math): {{marks[3]}}</p> </ div> < script src = "https://ajax.googleapis.com/ajax/libs/ angularjs /1.3.14/angular.min.js"> </script> </body > </ html>
AngularJS Controllers AngularJS applications are controlled by controllers. The ng-controller directive defines the application controller. A controller is a JavaScript Object , created by a standard JavaScript object constructor . AngularJS Example <div ng-app=" myApp " ng-controller=" myCtrl "> First Name: <input type="text" ng-model=" firstName ">< br > Last Name: <input type="text" ng-model=" lastName ">< br >< br > Full Name: {{ firstName + " " + lastName }} </div> <script> var app = angular.module (' myApp ', []); app.controller (' myCtrl ', function($scope) { $ scope.firstName = "John"; $ scope.lastName = "Doe"; }); </script>
Application explained: The AngularJS application is defined by ng-app=" myApp " . The application runs inside the <div>. The ng-controller=" myCtrl " attribute is an AngularJS directive. It defines a controller. The myCtrl function is a JavaScript function. AngularJS will invoke the controller with a $scope object. In AngularJS, $scope is the application object (the owner of application variables and functions). The controller creates two properties (variables) in the scope ( firstName and lastName ). The ng-model directives bind the input fields to the controller properties ( firstName and lastName ).
Controller Methods The example above demonstrated a controller object with two properties: lastName and firstName . A controller can also have methods (variables as functions): AngularJS Example <div ng-app=" myApp " ng-controller=" personCtrl "> First Name: <input type="text" ng-model=" firstName ">< br > Last Name: <input type="text" ng-model=" lastName ">< br > < br > Full Name: {{ fullName ()}} </div> <script> var app = angular.module (' myApp ', []); app.controller (' personCtrl ', function($scope) { $ scope.firstName = "John"; $ scope.lastName = "Doe"; $ scope.fullName = function() { return $ scope.firstName + " " + $ scope.lastName ; }; }); </script>
Controllers In External Files In larger applications, it is common to store controllers in external files. Just copy the code between the <script> tags into an external file named personController.js : AngularJS Example <div ng-app=" myApp " ng-controller=" personCtrl "> First Name: <input type="text" ng-model=" firstName ">< br > Last Name: <input type="text" ng-model=" lastName ">< br > < br > Full Name: {{ fullName ()}} </div> <script src ="personController.js"></script>
Tags
Categories
DesignDownload
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 7
- Slides 18
- Age 566 days
Related Slideshows
1
MGV Residential Design projects for different clients, including a New Mexico Adobe project-1-.pdf
mannyvesa
27 views
16
EUNITED_Advocacy and Public Engagement through Visual Media
GeorgeDiamandis11
32 views
31
DESIGN THINKINGGG PPT 2 TOPIC IDEATION.pptx
HibaZaidi2
26 views
36
DESIGN THINKING CHAPTER 1 PPTT PPT 1.pptx
HibaZaidi2
29 views
112
Hinduism and Its History - PowerPoint Slides.pptx
ConorMcCormack10
25 views
20
Service Attributes of Manufactured Parts.pptx
MustafaEnesKrmac
25 views