AngularJS之手动加载模块app和controller

最新推荐文章于 2019-07-10 15:23:16 发布

weixin_33727510

最新推荐文章于 2019-07-10 15:23:16 发布

阅读量119

点赞数

文章标签： javascript ui ViewUI

原文链接：http://www.cnblogs.com/TiestoRay/p/5007355.html

版权

使用ng的页面中一般都是使用模块自动加载，页面的结构一般是这样的

加载angularjs脚本
加载业务代码脚本（或者写在script标签中）
html结构代码（带有ng指令）

就像这样

app.html

<html>
    <head>
        <script src="angular.js"></script>
        <script src="mypage.js"></script>
    </head>
    <body ng-app="app" ng-controller="ctrl">
        <h1 ng-bind="Model.Name"></h1>
    </body>
</html>

mypage.js

var app = angular.module("app", []);
var ctrl = app.controller("ctrl", function ($scope, $http) {
    $scope.Model = {
        Name: "ABC"
    };
});

大部分情况mypage.js只要在angularjs后面的任意位置都可以。

但是，如果mypage.js是异步加载的，例如script加上了 async，或者使用requirejs等模块化脚本，那么ng将会出错

解决方法：

在业务代码后面给dom添加controller指令
使用angularjs的模块手动加载函数bootstrap

要注意的是，module和controller(即下面的app和ctrl)的定义要在bootstrap执行之前

var app = angular.module("app", []);
var ctrl = app.controller("ctrl", function ($scope, $http) {
    $scope.UI = {
        Model: {
            NickName: "ABC",
            Password: ""
        }
    };
});

angular.bootstrap(document, ['app']);
angular.element(document).find('body').attr({ "ng-controller": "Ctrl" });
angular.element(document).find('html').addClass('ng-app');

转载于:https://www.cnblogs.com/TiestoRay/p/5007355.html