Home > Developer > AngularJS

Introduction to Angularjs View function application

Source: Internet
Author: User
Tags config html page min
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞


This article mainly introduces the view function application of Angularjs, including Ng-view and Ng-template, and the use of $routeprovider, and $routeProvider need friends can refer to the following



ANGULARJS supports the application of a single page through multiple views on a single page. To do this angularjs provides Ng-view and ng-template instructions, as well as $routeProvider services.



Ng-view



The Ng-view tag simply creates a placeholder and is a corresponding view (HTML or ng-template view) that can be placed according to the configuration.



Use



Define a div and Ng-view in the main module.



<div ng-app= "Mainapp" > ... <div ng-view></div> </div>


Ng-template



The ng-template directive is used to create HTML views that use the script label. It contains a view "id" attribute for the $routeprovider map controller.



Use



Defines a type as a ng-template script block in the main module.




<div ng-app= "Mainapp" > ... <script type= "text/ng-template" id= "addstudent.html" >


$routeProvider



$routeProvider is the configuration of the group URLs, mapping them to the appropriate HTML page or ng-template, and attaching a service with the same key as the controller.



Use



Defines a type as a ng-template script block in the main module.




<div ng-app= "Mainapp" > ... <script type= "text/ng-template" id= "addstudent.html" >


Use



Defines the script block for the main module and sets the routing configuration.




var Mainapp = angular.module ("Mainapp", [' Ngroute ']); Mainapp.config ([' $routeProvider ', function ($routeProvider) {$routeProvider. When ('/addstudent ', {templateurl: ') Addstudent.html ', controller: ' Addstudentcontroller '}). When ('/viewstudents ', {templateurl: ' viewstudents.html ', controller: ' Viewstudentscontroller '}). Otherwise ({redirectto: '/addstudent '}); }]);


Here are some important questions to consider in the above example



$routeProvider is defined as the configuration function of the Mainapp module using the keyword as the ' $routeProvider ';



$routeProvider when the url "/addstudent" is defined to map to "addstudent.html". Addstudent.html should exist in the same path as the main HTML page. If the HTM page is not defined, then ng-template is used by id= "addstudent.html". We have used the ng-template;



"Otherwise" is the default view to set;



"Conlloer" is used to set the controller for the view;



Example



The following example shows all of the above instructions.



Testangularjs.html




<html> <head> <title>Angular JS Views</title> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.min.js"></script> </head> <body> <h2>AngularJS Sample Application</h2> <div ng-app="mainApp"> <p><a href="#addStudent">Add Student</a></p> <p><a href="#viewStudents">View Students</a></p> <div ng-view></div> <script type="text/ng-template" id="addStudent.html"> <h2> Add Student </h2> {{message}} </script> <script type="text/ng-template" id="viewStudents.html"> <h2> View Students </h2> {{message}} </script> </div>   <script> var mainApp = angular.module("mainApp", ['ngRoute']);   mainApp.config(['$routeProvider', function($routeProvider) { $routeProvider. when('/addStudent', { templateUrl: 'addStudent.html', controller: 'AddStudentController' }). when('/viewStudents', { templateUrl: 'viewStudents.html', controller: 'ViewStudentsController' }). otherwise({ redirectTo: '/addStudent' }); }]);   mainApp.controller('AddStudentController', function($scope) { $scope.message = "This page will be used to display add student form"; });   mainApp.controller('ViewStudentsController', function($scope) { $scope.message = "This page will be used to display all the students"; }); </script> </body> </html>

Results



Open textangularjs.html in your Web browser. See the results as follows:


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.

Related Keywords:
sample angularjs application single page application angularjs tutorial mastering web application development with angularjs how to debug angularjs view function in sql learning angularjs guide to angularjs development back to top angularjs
Related Article
Angularjs Upload picture preview __js
angularjs-the Reading and assignment of global variables thro...
Different Web pages are set by Ui-router in Angularjs
The magical function of the Angularjs self-executing function
Angularjs $state. Go page does not refresh data __js
Angularjs Post Request header field Content-type is not allow...

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

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