我也是新的AngularJS和ui路由器。我尝试根据我在教程中看到的模式构建一个应用程序,但它似乎并不工作。我插入两个警报语句,但他们不运行。
也不显示projectlist.html。
JS控制台上没有错误。
问题是什么?
JS:
var EntityEditorApp = angular.module('EntityEditorApp',['ngResource','ui.router']) .config(function ($stateProvider,$urlRouterProvider) { $urlRouterProvider.otherwise('/'); $stateProvider .state('/',{ url: '/api/Projects',templateUrl: 'projectlist.html',controller: 'ListCtrl' }); }); EntityEditorApp.factory('Project',function ($resource) { alert(1); // This does not run return $resource('/api/Project/:id',{ id: '@id' },{ update: { method: 'PUT' } }); }); var ListCtrl = function ($scope) { alert(1); // This does not run $scope.projects = []; $scope.search = function () { Project.query(function (data) { $scope.projects = $scope.projects.concat(data); }); }; $scope.search(); };
HTML:
<!DOCTYPE html> <html ng-app="EntityEditorApp" xmlns="http://www.w3.org/1999/xhtml"> <head> <script src="Scripts/jquery-1.10.2.js"></script> <script src="Scripts/bootstrap.js"></script> <script src="Scripts/angular.js"></script> <script src="Scripts/angular-route.js"></script> <script src="Scripts/angular-resource.js"></script> <script src="Scripts/AngularUI/ui-router.js"></script> <script src="Scripts/app/entityeditor.js"></script> <link href="Content/bootstrap.css" rel="stylesheet" /> <title>AngularJS Tutorial Todo App</title> </head> <body> <div class="container"> <div ng-view></div> </div> </body> </html>
您需要使用ui-view not ng-view
另外,否则()使用URL而不是路由名称。所以在你的情况下应该是:
$urlRouterProvider.otherwise('/api/Projects');