关于angular js中ng-view的一些问题讨论

时间:2022-08-15 19:41:06

声明:该篇是一个讨论问题的,不是解决问题的,希望对这方面比较了解的朋友能看一下,或许你们能帮到我

ng-view is a directive that complements the $route service by including the rendered template of the current route into the main layout (index.html) file. Every time the current route changes, the included view changes with it according to the configuration of the $route service.

上面是angular js官方文档中一段对于ng-view的描述,大体意思就是ng-view这条指令可以通过路由将渲染过的模板加入主页的显示中,每当路由发生改变,视图就会根据路由的配置显示相应的模板内容。

具体实现中可以合写也可以分开写:

1.合写

var Ctrls=angular.module("aaa",[
"ngRoute"
]);
Ctrls.config(function ($routeProvider) {
$routeProvider.when("/hello",{
templateUrl:"tpls/hello.html",
controller: "helloCtrl"
}).when("/XXX", {
templateUrl:"tpls/yyy.html",
controller: "zzz"
}).otherwise({
redirectTo:"/hello"
});
});
Ctrls.controller('helloCtrl', ['$scope',function ($scope) {
    $scope.hello="hello world";
}]);

经过测试,该种方法是可行的

2.分开写

app.js:

var app=angular.module("aaa",[
"ngRoute","Ctrls"
]);
app.config(function ($routeProvider) {
$routeProvider.when("/hello",{
templateUrl:"tpls/hello.html",
controller: "helloCtrl"
}).when("/XXX", {
templateUrl:"tpls/yyy.html",
controller: "zzz"
}).otherwise({
redirectTo:"/hello"
});
});

cntroller.js:
var Ctrls=angular.module("aaa",[
"ngRoute"
]);
Ctrls.controller('helloCtrl', ['$scope',function ($scope) {
    $scope.hello="hello world";
}]);

经过测试这种方法没有得到相应的效果,但是也并没有报错。

如果你知道其中的原因,希望你评论下面,非常感谢
我也会继续研究,后续会发出关于这个问题的解答