AngularJS View Details and sample code, angularjs sample code

Source: Internet
Author: User

AngularJS View Details and sample code, angularjs sample code

AngularJS supports single-page applications with multiple views on a single page. AngularJS provides ng-view and ng-template commands and $ routeProvider services.

Ng-view

The ng-view tag simply creates a placeholder, which is a corresponding view (HTML or ng-template view) and 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 command is used to create an HTML view that uses the script tag. It contains an "id" attribute mapped to the Controller view by $ routeProvider.

Use

Define the type as the script block of ng-template in the main module.

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

$ RouteProvider

$ RouteProvider is the configuration of the group URL, maps them to the corresponding HTML page or ng-template, and attaches a controller to a service that uses the same key.

Use

Define the type as the script block of ng-template in the main module.

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

Use

Define the script block of the main module and configure the route.

 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'        });     }]);

The following are important issues to consider in the above example:

$ RouteProvider is defined as the configuration function of the mainApp module under '$ routeProvider;

$ RouteProvider: When the URL "/addstudent "“addstudent.html" is defined ". AddStudent.html should be stored in the main html pages of the same path. If the htmpage does not have a definition, then ng-templateis used by id1_addstudent.html. We have used ng-template;

"Otherwise" is the default view used to set;

"Conloer" is used to set the Controller corresponding to the view;

Example

The following example shows all the preceding commands.

TestAngularJS.html

Result

Open textangularjs.html in the webbrowser. The result is as follows:

The above is the arrangement of AngularJS View data. We will continue to add relevant information in the future. Thank you for your support for this site!

Related Article

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.

A Free Trial That Lets You Build Big!

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.