问

Angularjs ng-view不起作用

海之蓝水之清清2011 发布于 2022-12-08 16:14

html

我正在尝试创建一个简单的视图angualrjs + ngRoute.

为什么它对我不起作用???

请问,任何人都可以看看我的Plunker示例,并向我解释我做错了什么？

我的index.html:



    
        Angular Route training
        
        

        
        
               
    

    

        

            

                    
                        {{text}}
                    

            



            

                    Views Menu

                    
                        Back to HOME
                        Our Developers
                        Our Designers

这是app.js:

var app = angular.module('app', []);

var views = angular.module('views', ['ngRoute']);

views.config(function($routeProvider, $locationProvider){
    $routeProvider.
        when('#/developers', {templateUrl: 'views/dev.html', controller: 'DevCtrl'}).
        when('#/designers',{templateUrl: 'views/design.html',controller: 'DesignCtrl'}).
        otherwise({ redirectTo: 'index.html' });
    $locationProvider.html5Mode(true);
});

app.controller('MainController', function($scope) {
    $scope.text = "Hello World!!!!";
});

views.controller('DevCtrl', function($scope) {
    $scope.developers = [
        {"name":"John", "family":"Doe"}, 
        {"name":"Anna", "family":"Smith"},
        {"name":"Peter", "family":"Jones"},
        {"name":"Alex", "family":"Volkov"}, 
        {"name":"Yaniv", "family":"Smith"},
    ]
});

views.controller('DesignCtrl', function($scope) {
    $scope.designers = [
        {"name":"Inna", "family":"Doe"}, 
        {"name":"Anna", "family":"Smith"},
        {"name":"Yafit", "family":"Jones"}
    ]
});

design.html:



    Designers List

    
        
            Name
            Family
        
        
            {{d.name}}
            {{d.family}}

Name	Family
{{d.name}}	{{d.family}}

和dev.html



    Developers List

    
        
            Name
            Family
        
        
            {{dev.name}}
            {{dev.family}}

Name	Family
{{dev.name}}	{{dev.family}}

谢谢

1 个回答

问题是ng-app的使用不正确.只为您的应用程序声明一次ng-app,通常是在html元素上.

然后将其他模块声明为主模块的依赖项.

我将ng-app声明放在html标签上,并将你的ng-routing放在app模块中,摆脱了views模块.

http://plnkr.co/edit/btL2QMyHxhDLH7cxZ1YV
```
var app = angular.module('app', ['ngRoute']);
app.config(function($routeProvider, $locationProvider){
    $routeProvider.
        when('/developers', {templateUrl: 'dev.html', controller: 'DevCtrl'}).
        when('/designers',{templateUrl: 'design.html',controller: 'DesignCtrl'}).
        otherwise({ redirectTo: '/index' });
    // $locationProvider.html5Mode(true);
});

<html ng-app="app">
```
您还可以将视图逻辑放在单独的模块中,但通常您也会将其放在不同的文件中.

html5mode被禁用,因为它触发了一个错误(让它工作有点棘手).

注意:实际上可以通过手动引导它们来使用多个ng-app,但除非你有充分的理由,否则你真的不应该这样做.
2022-12-11 02:08 回答

纯情利宾立2502857907

撰写答案

今天，你开发时遇到什么问题呢？

立即提问

热门标签