• 首页
  • 问答

    • AngularJS 视图详解及示例代码

    2023-07-08 10:41 19次浏览 问答

    AngularJS支持通过在单个页面上的多个视图的单页应用。要做到这一点AngularJS提供ng-view 和 ng-template指令，以及 $routeProvider 服务。ng-viewng-view 标记只是简单地创建一个占位符，是一个相应的视图(HTML或ng-template视图)，可以根据配置来放置。
    使用定义一个div与ng-view在主模块中。<div ng-app=”mainApp”> <div ng-view></div></div>ng-templateng-template 指令是用来创建使用script标签的HTML视图。
    它包含一个用于由$routeProvider映射控制器视图“id”属性。使用定义类型作为主模块中 ng-template 的脚本块。<div ng-app=”mainApp”> <script type=”text/ng-template”>html”> <h2> Add Student </h2> {{message}} </script></div>$routeProvider$routeProvider是组网址的配置，将它们映射相应的HTML页面或 ng-template，并附加一个控制器使用相同键的服务。
    使用定义类型作为主模块中 ng-template 的脚本块。<div ng-app=”mainApp”> <script type=”text/ng-template”>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’ }); }]);以下是在上面的例子中需要考虑的重要问题$routeProvider被定义为使用关键字作为’$routeProvider“下mainApp模块的配置功能；$routeProvider当定义了URL“/addStudent”映射到“addStudent。
    html”。 addStudent。html应存在于相同的路径主要的html 页面。如果htm页面没有定义，那么ng-template被id=“addStudent。html”使用。我们已经使用了ng-template；“otherwise”是用来设置的默认视图；“conlloer”是用来设置该视图对应的控制器；例子下面的例子将展示上述所有指令。
    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”>html”> <h2> Add Student </h2> {{message}} </script> <script type=”text/ng-template”>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>结果在Web浏览器中打开textAngularJS。
    html。看到结果如下：。

    1.文章《AngularJS 视图详解及示例代码》援引自互联网，为网友投稿收集整理，仅供学习和研究使用，内容仅代表作者本人观点，与本网站无关，侵删请点击页脚联系方式。

    2.文章《AngularJS 视图详解及示例代码》仅供读者参考，本网站未对该内容进行证实，对其原创性、真实性、完整性、及时性不作任何保证。

    相关推荐

    ↑