Javascript 使用controllerAs的angularJS路由_Javascript_Angularjs

Javascript 使用controllerAs的angularJS路由

javascript angularjs

Javascript 使用controllerAs的angularJS路由,javascript,angularjs,Javascript,Angularjs,我对angularJS是新手，正在努力学习。我在config.js文件中定义了配置函数。该文件的第一行本身给出了一个错误 angular.module('app').config(function($routeProvider, $locationProvider){ $locationProvider.HTML5Mode(true); $routeProvider .when('/',{ templateUrl: 'index.html',

我对angularJS是新手，正在努力学习。我在

config.js

文件中定义了配置函数。该文件的第一行本身给出了一个错误

 angular.module('app').config(function($routeProvider, $locationProvider){

   $locationProvider.HTML5Mode(true);

   $routeProvider
   .when('/',{
       templateUrl: 'index.html',
       controller: 'MainController'
   })
   .when('/add', {
       templateUrl: 'add.html',
       controller: 'MainController',
       controllerAs: 'main',
   })

});

下面是我的app.js文件

angular.module('app',['ngRoute']);

在main.ctrl.js中编写了我的控制器函数

angular.module('app').controller("MainController", function(){
var vm = this;
vm.title = 'TV Show';
vm.searchInput = '';
vm.shows = [
    {
        title: 'Game of Thrones',
        year: 2011,
        favorite: true
    },
    {
        title: 'Walking Dead',
        year: 2010,
        favorite: false
    },
    {
        title: 'Firefly',
        year: 2002,
        favorite: true
    },
    {
        title: 'Banshee',
        year: 2013,
        favorite: true
    },
    {
        title: 'Greys Anatomy',
        year: 2005,
        favorite: false
    }
];
vm.orders = [
{
    id: 1,
    title: 'Year Ascending',
    key: 'year',
    reverse: false
},
{
    id: 2,
    title: 'Year Descending',
    key: 'year',
    reverse: true
},
{
    id: 3,
    title: 'Title Ascending',
    key: 'title',
    reverse: false
},
{
    id: 4,
    title: 'Title Descending',
    key: 'title',
    reverse: true
}
];
vm.order = vm.orders[0];
vm.new = {};
vm.addShow = function() {
vm.shows.push(vm.new);
console.log("vm.shows");
vm.new = {};
};

});

现在，我创建了一个add.html页面，试图访问我的控制器（MainController），但无法访问它。你能告诉我哪里出了问题吗

    <!DOCTYPE html>
    <html ng-app = 'app'>
    <head lang="en">
    <meta charset="UTF-8">
    <title>Favourite TV Show</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.2/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
    <script src="app.js"></script>
    <script src="main.ctrl.js"></script>
</head>
<body style="width: 60%; margin:0 auto;">
    <h1>This is add page.</h1>
    <h3>Add a new TV Show</h3>
    {{main.title}}
    {{main.shows[0].title}}
    <form name="main.addForm" class="form" ng-submit="main.addShow()">

        <div class="form-group">
            <label>Title</label>
            <input type="text" class="form-control" ng-model="main.new.title" required />
        </div>
        <div class="form-group">
            <label>Year</label>
            <input type="number" min="1900" max="2030" class="form-control" ng-model="main.new.year" required />
        </div>
        <div class="row">
            <div class="col-xs-6">
                <label>Favorite: <input type="checkbox" ng-model="main.new.favorite" /></label>
            </div>
            <div class="col-xs-6">
                <button class="btn btn-success pull-right"><span class="glyphicon glyphicon-plus-sign"></span> Add</button>
            </div>
        </div>
    </form>  
</body>
</html>


最受欢迎的电视节目
这是添加页面。
添加一个新的电视节目
{{main.title}
{{main.shows[0].title}
标题
年
最喜欢的：
添加

下面是我的index.html文件。当用户单击new show按钮时，我打开add.html页面

<body ng-app="app" ng-controller="MainController as main" style="width: 60%; margin:0 auto;">
    <div class="container">
        <h1>{{main.title}}</h1>
        <div class="input-group">

            <span class="input-group-addon">
                <span class="glyphicon glyphicon-search"></span>
            </span>
            <input type="text" class="form-control" ng-model="main.searchInput" style="width: 60%; margin:0 auto;">
        </div>
    <p>{{main.searchInput}}</p>
    </div>
    <a href=""><h3>A list of TV shows</h3></a>

    <ul class="list-group"> 
        <li class="list-group-item" ng-repeat="show in main.shows | filter:main.searchInput |  orderBy:main.order.key:main.order.reverse" >
            <span class="glyphicon glyphicon-star" ng-if="show.favorite"></span>
            {{show.title}} 
            <span class="badge">{{show.year}}</span>
            <i class="glyphicon glyphicon-edit"></i>
        </li>
    </ul>

    <select class="form-control pull-right" ng-model="main.order" ng-options="order as order.title for order in main.orders"></select>
    <div class="clearfix"></div>
    </br>
    <div class="row">
            <div class="col-xs-6"></div>
            <div class="col-xs-6">
                <a href="./add.html"><button class = "btn-primary pull-right">New Show</button></a>
            </div>
    </div>


{{main.title}
{{main.searchInput}


{{show.title}
{{show.year}

目前您已直接将内容添加到正文中。我认为html应该属于

add.html

。直接加载该内容时，不会加载别名为

main

的控制器

MainController

由于您希望查看页面上的更改

ngRoute

，因此您需要在页面上设置

ng view

指令。它将在页面上动态添加

add.html

内容

标记

<body style="width: 60%; margin:0 auto;">
    <ng-view></ng-view>
</body>

我已按要求提供了一个更新版本。请看一看。我注意到了一些事情，并提供了一些提示：

避免全局性的

尝试使用IIFE函数包装模块引用，而不是将其保留在全局命名空间中

angular.module("app", ["ngRoute"]; // Your code

建议

(function() {
    "use strict";
     angular.module("app", ["ngRoute"];
})();

$locationProvider.html5Mode（true）不是$locationProvider.html5Mode（true）

(function() { angular .module("app") .config(function($routeProvider, $locationProvider) { // $locationProvider.HTML5Mode(true); <-- your code $locationProvider.html5Mode(true); .... // rest of code }); })();
您可以这样引用它：

(function () { "use strict"; angular .module("app") .config(function() { }); })();

请让我知道如果这是你想要的，我会根据需要不断更新。我还提供了，它真的很好，有棱角分明的团队支持，看一看。我从中学到了很多。
当你点击URL/add时会发生什么？应用程序被路由到add.html，这个页面被打开。问题是，在此页面上，我无法访问我的控制器。控制台中是否出现任何错误？？另外，我可以问一下您使用的是什么版本的AngularJS，因为ControllerAs语法不在AngularJS的早期版本中。这可能不是你的问题。angularjs/1.5.0-beta.2/angular.min.js和angularjs/1.2.25/angular-route.js让我知道你的电子邮件id，我会给你发送我的项目。这两个问题是，我无法从add.html页面访问控制器，如果我在config.js页面中使用angular.module（'app'）.config，就会出现错误。您好，我尝试了您建议的方法，但没有成功。我已经用项目中的所有文件更新了代码。你能告诉我哪里出了问题吗？非常感谢你的帮助。我将明确检查样式指南链接。但当我转到add.html页面并尝试访问控制器对象和方法时，仍然无法访问。在add.html
{{main.title}{{main.shows[0].title}}
中有一段代码，我仍然无法访问它。@vishesh将这一行添加到body标记中，您应该会看到它：
data ng controller=“MainController as main”
，我还建议您正确查看ng视图和路由模块。你的安装方式不是很理想。另一种选择是查看
ui路由器
另一个角度路由模块。
(function() { angular .module("app") .config(function($routeProvider, $locationProvider) { // $locationProvider.HTML5Mode(true); <-- your code $locationProvider.html5Mode(true); .... // rest of code }); })();

app.config(...) // app was not defined, had a reference error.

(function () { "use strict"; angular .module("app") .config(function() { }); })();