ANGULARJS 60 minute Introductory tutorial

ANGULARJS 60 minute Introductory tutorial _angularjs

Last Update:2017-01-19 Source: Internet

Author: User

Tags html tags

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Angularjs is a good framework for developing SPA applications (one-page Web applications). One-page Web application (Single page Web Application,spa) is the application of only one Web page. The browser initially loads the necessary HTML, CSS, and JavaScript, all of which are done on this page, and JavaScript controls how different view renders on this page. This article comes from a good angularjs tutorial video from YouTube: Angularjs Fundamentals in 60-ish Minutes, which mainly explains Angularjs Directive,data, The concept and usage of filter and module. Personally, these four concepts are the core of ANGULARJS, supporting the skeleton of the angularjs. Mastering them is very helpful to grasp the angularjs in the overall situation. Advanced will require a lot of practice and the official website API document reading.

Look at the picture below to find out what ANGULARJS is capable of.

First download angular.min.js and angular-route.min.js from the official website. Can be downloaded from the official website (https://angularjs.org/or https://code.angularjs.org/)

Create an empty empty Web project in vs.

directive and Data Binding

The directive concept in Angularjs is not easily understood, and the introductory phase can be interpreted as a tag to extend HTML. Angularjs will parse these tags to achieve the Angularjs magic.
The following code uses two Directive:ng-app and Ng-model.

Ng-app: For Auto-bootstrap a ANGULARJS application. This is a necessary directive, typically added to the root object of the HTML (as shown in the following code). More detailed explanation, the website: https://docs.angularjs.org/api/ng/directive/ngApp

Ngmodel: Used to establish a two-way data Binding between the property and HTML controls (Input,select, textarea), which means that the value changes of the HTML control are reflected in the property and vice versa. The property is an object created through {{}}.

The following code shows the creation of a data Binding between a text control and a name.

<!DOCTYPE html>
<html ng-app>
<head>
<title>Using Directives and Data Binding Syntax</title>
</head>
<body>
<div class="container">
Name: <input type="text" ng-model="name" /> {{name}}
</div>
<script src="angular.min.js"></script>
</body>
</html>

Directives can be prefixed with "x-" or "data-". Directives can be placed in element names, attributes, classes, and comments.

<!DOCTYPE html>
<html data-ng-app="">
<head>
<title>Using Directives and Data Binding Syntax</title>
</head>
<body>
<div class="container">
Name: <input type="text" data-ng-model="name" /> {{name}}
</div>
<script src="angular.min.js"></script>
</body>
</html>

The following example shows the use of ng-init and ng-repeat to traverse an array.

<!DOCTYPE html>
<html data-ng-app="">
<head>
<title>Iterating with the ng-repeat Directive</title>
</head>
<body>
<div class="container" data-ng-init="names = ['Terry','William','Robert','Henry']">
<h3>Looping with the ng-repeat Directive</h3>
<ul>
<li data-ng-repeat="name in names">{{name}}</li>
</ul>
</div>
<script src="angular.min.js"></script>
</body>
</html>

For more directve usage, refer to the official website https://docs.angularjs.org/api
Filter

The effect is to receive an input, process it through a rule, and return the processed result. It is mainly used to filter arrays, sort elements in arrays, format data, and so on.
AngualrJS has built-in filters: currency, date, filter, substring, json, limitTo, lowercase, uppercase, uppercase ), number (number), orderBy (sort). A total of nine. In addition to this, you can customize the filter, this is powerful, can meet any required data processing.
The following code shows the implementation of data filtering, sorting, and case conversion. Each Filter follows the data and is separated by |.

<!DOCTYPE html>
<html data-ng-app="">
<head>
<title>Using Filter</title>
</head>
<body>
<div class="container" data-ng-init="customers = [{name:'Terry Wu',city:'Phoenix'},
{name:'Terry Song',city:'NewYork'},{name:'Terry Dow',city:'NewYork'},
{name:'Henry Dow',city:'NewYork'}]">
Names:
<br />
<input type="text" data-ng-model="name" />
<br />
<ul>
<li data-ng-repeat="cust in customers | filter:name | orderBy:'city'">{{cust.name | uppercase}} - {{cust.city | lowercase}}</li>
</ul>
</div>
<script src="angular.min.js"></script>
</body>
</html>

Module

Module is a container for managing all parts of an AngularJS application and is a very important concept in AngularJS. An AngularJS application is a Module that acts like an Assembly in a C# application. In C# we use the main function to bootstrap the application. AngularJS bootstrap an AngularJS application via na-app="moduleName". moduleName is the name of the Module object.

Config/Route: The route used to configure AngularJS applications (AngularJS), which is similar to Config/Route in ASP.NET MVC applications.
Filter: Filters the data, as explained above.
Directive: Extend HTML, the most important concept in AngularJS. There is no AngularJS without Directive.
Controller: Functions like a Controller in an ASP.NET MVC application. The page logic is implemented in the Controller, and the model can be manipulated by the controller. AngularJS binds the model to the view (HTML control) via the built-in Data-Binding mechanism.
Factory/Service/Provider/Value: Provides access to the data source. For example, the Restful API is a common data source. The Controller accesses the data source through Factory/Service/Provider/Value to complete the CRUD operation of the data.

The following code implements the same functionality of the above example. The difference is that this instance implements the above functionality by creating a module (angularJS application) and adding a contorller under the module. In SimpleController (Controller), we created customers (Model) and initialized the data, and View (Html control) directly bound to customers (Model). Scope is a container object for all viewModules in AngualrJS. The Controller needs to pass the Scope is a container object of all viewModules in AngualrJS. The Controller needs to access the viewModule through the Scope.

This example is closer to the actual engineering usage than the above example.

<!DOCTYPE html>
<html data-ng-app="demoApp">
<head>
<title>Using module Controller</title>
</head>
<body>
<div data-ng-controller="SimpleController">
Names:
<br />
<input type="text" data-ng-model="name" />
<br />
<ul>
<li data-ng-repeat="cust in customers | filter:name | orderBy:'city'">{{cust.name | uppercase}} - {{cust.city | lowercase}}</li>
</ul>
</div>
<script src="angular.min.js"></script>
<script>
var demoApp = angular.module("demoApp", []);
demoApp.controller("SimpleController", function ($scope) {
$scope.customers = [
{ name: 'Terry Wu', city: 'Phoenix' },
{ name: 'Terry Song', city: 'NewYork' },
{ name: 'Terry Dow', city: 'NewYork' },
{ name: 'Henry Dow', city: 'NewYork' }
];
});
</script>
</body>
</html>
<!DOCTYPE html>
<html data-ng-app="demoApp">
<head>
<title>Using Controller</title>
</head>
<body>
<div data-ng-controller="SimpleController">
Names:
<br />
<input type="text" data-ng-model="name" />
<br />
<ul>
<li data-ng-repeat="cust in customers | filter:name | orderBy:'city'">{{cust.name | uppercase}} - {{cust.city | lowercase}}</li>
</ul>
</div>
<script src="angular.min.js"></script>
<script>
var demoApp = angular.module("demoApp", []);
var controllers = {};
controllers.SimpleController = function ($scope) {
$scope.customers = [
{ name: 'Terry Wu', city: 'Phoenix' },
{ name: 'Terry Song', city: 'NewYork' },
{ name: 'Terry Dow', city: 'NewYork' },
{ name: 'Henry Dow', city: 'NewYork' }
];
}
demoApp.controller(controllers);
</script>
</body>
</html>
<!DOCTYPE html>
<html data-ng-app="demoApp">
<head>
<title>Using Controller</title>
</head>
<body>
<div>
<div data-ng-view=""></div>
</div>
<script src="angular.min.js"></script>
<script src="angular-route.min.js"></script>
<script>
var demoApp = angular.module('demoApp', ['ngRoute']);
demoApp.config(function ($routeProvider) {
$routeProvider
.when('/',
{
controller: 'SimpleController',
templateUrl: 'Partials/View1.html'
})
.when('/view2',
{
controller: 'SimpleController',
templateUrl: 'Partials/View2.html'
})
.otherwise({redirectTo:'/'});
});
var controllers = {};
controllers.SimpleController = function ($scope) {
$scope.customers = [
{ name: 'Terry Wu', city: 'Phoenix' },
{ name: 'Terry Song', city: 'NewYork' },
{ name: 'Terry Dow', city: 'NewYork' },
{ name: 'Henry Dow', city: 'NewYork' }
];
$scope.addCustomer = function () {
$scope.customers.push({ name: $scope.newCustomer.name, city: $scope.newCustomer.city });
};
}
demoApp.controller(controllers);
</script>
</body>
</html>

The following example implements a SPA instance by configuring the module's route through config. First create View1.html and View2.html. The directory structure is shown below.

<div>
<h2>View1</h2>
Names:
<br />
<input type="text" data-ng-model="filter.name" />
<br />
<ul>
<li data-ng-repeat="cust in customers | filter:filter.name | orderBy:'city'">{{cust.name | uppercase}} - {{cust.city | lowercase}}</li>
</ul>
<br />
Customer Names:<br />
<input type="text" data-ng-model="newCustomer.name" />
<br />
Customer City:<br />
<input type="text" data-ng-model="newCustomer.city" />
<br />
<button data-ng-click="addCustomer()">Add Customer </button>
<br />
<a href="#/view2">View 2</a>
</div>
<div>
<h2>View2</h2>
City:
<br />
<input type="text" data-ng-model="city" />
<br />
<ul>
<li data-ng-repeat="cust in customers | filter:city | orderBy:'city'">{{cust.name | uppercase}} - {{cust.city | lowercase}}</li>
</ul>
</div>

The route of view1 and view2 in the current page is configured by $routeProvider, and the controller corresponding to each view. View1 and view2 will show where the current page is labeled ng-view.

At the same time, we decoupled the controller and HTML tags through config. In the above example, we need to add the ng-controller tag to the html tag to use the controller. This is done directly through config.

<!DOCTYPE html>
<html data-ng-app="demoApp">
<head>
<title>View</title>
</head>
<body>
<div>
<div data-ng-view=""></div>
</div>
<script src="angular.min.js"></script>
<script src="angular-route.min.js"></script>
<script>
var demoApp = angular.module('demoApp', ['ngRoute']);
demoApp.config(function ($routeProvider) {
$routeProvider
.when('/',
{
controller: 'SimpleController',
templateUrl: 'Partials/View1.html'
})
.when('/view2',
{
controller: 'SimpleController',
templateUrl: 'Partials/View2.html'
})
.otherwise({redirectTo:'/'});
});
var controllers = {};
controllers.SimpleController = function ($scope) {
$scope.customers = [
{ name: 'Terry Wu', city: 'Phoenix' },
{ name: 'Terry Song', city: 'NewYork' },
{ name: 'Terry Dow', city: 'NewYork' },
{ name: 'Henry Dow', city: 'NewYork' }
];
$scope.addCustomer = function () {
$scope.customers.push({ name: $scope.newCustomer.name, city: $scope.newCustomer.city });
};
}
demoApp.controller(controllers);
</script>
</body>
</html>

The last instance is closer to the usage in the actual project. We introduced the Factory to initialize the data (in the actual project, the webAPI can be accessed here to get the data to complete the initialization), and the Controller obtains the data through the Factory.

<!DOCTYPE html>
<html data-ng-app="demoApp">
<head>
<title>Using Factory</title>
</head>
<body>
<div>
<div data-ng-view=""></div>
</div>
<script src="angular.min.js"></script>
<script src="angular-route.min.js"></script>
<script>
var demoApp = angular.module('demoApp', ['ngRoute']);
demoApp.config(function ($routeProvider) {
$routeProvider
.when('/',
{
controller: 'SimpleController',
templateUrl: 'Partials/View1.html'
})
.when('/view2',
{
controller: 'SimpleController',
templateUrl: 'Partials/View2.html'
})
.otherwise({ redirectTo: '/' });
});
demoApp.factory('simpleFactory', function () {
var customers = [
{ name: 'Terry Wu', city: 'Phoenix' },
{ name: 'Terry Song', city: 'NewYork' },
{ name: 'Terry Dow', city: 'NewYork' },
{ name: 'Henry Dow', city: 'NewYork' }
];
var factory = {};
factory.getCustomers = function ()
{
return customers;
}
return factory;
});
var controllers = {};
controllers.SimpleController = function ($scope, simpleFactory) {
$scope.customers = [];
init();
function init() {
$scope.customers = simpleFactory.getCustomers();
}
$scope.addCustomer = function () {
$scope.customers.push({ name: $scope.newCustomer.name, city: $scope.newCustomer.city });
};
}
demoApp.controller(controllers);
</script>
</body>
</html>

The above content is a 60-minute introduction to the AngularJs basic tutorial for Xiaobian. I hope to help everyone!

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More