AngularJS 路由不工作,但没有抛出错误
AngularJS routing not working, but no errors are thrown
我正在关注这个 video tutorial 并在匆忙中搞砸了。问题是我摆脱了 所有 我犯的错误,但是它仍然没有按预期工作。搜索表单框不显示。
可在此处找到完整代码:plnkr code
index.html
<!DOCTYPE html>
<html ng-app="githubViewer">
<head>
<script data-require="angular.js@1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
<script data-require="angular-route@*" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular-route.js"></script>
<link rel="stylesheet" href="style.css" />
<script scr="app.js"></script>
<script src="MainController.js"></script>
<script src="github.js"></script>
</head>
<body >
<h1>Gihub Viewer</h1>
<div ng-view></div>
</body>
</html>
app.js
(function(){
var app = angular.module("githubViewer", ["ngRoute"]);
app.config(function($routeProvider){
$routeProvider
.when("/main", {
templateUrl: "main.html",
controller: "MainController"
})
.otherwise({redirectTo:"/main"});
});
}());
main.html
<div>
{{ countdown }}
<form name="searchUser" ng-submit="search(username)">
<input type="search" required="" placeholder="Username to find"
ng-model="username" />
<input type="submit" value="Search" />
</form>
</div>
任何帮助将不胜感激
基本上你所有的js文件都有错误的IIFE pattern.wrong
应该是
})();
而不是
}());
还有错别字。在 index.html:
<script scr="app.js"></script>
必须是:
<script src="app.js"></script>
并在 MainController.js。此代码:
app.controller("MainControler", MainController);
必须改为:
app.controller("MainController", MainController);
您误解了如何实现模块和控制器。在 MainController.js 和 app.js 中,您都有以下行:
var app = angular.module("githubViewer", ["ngRoute"]);
angular.module
实际上创建了一个新模块。您实际上是在尝试创建两个具有相同名称的模块,这是不允许的。
要遵循的模式是
var app = angular.module(...)
app.config(...)
var controller = app.controller("MainController", ["$scope", function() {
]]);
如果您确实希望 MainController
代码位于单独的文件中,请创建一个函数:
function createMainController(app) {
app.contoller("MainController", ...)
}
问题是您在控制器和工厂代码中重新定义了模块:
var app = angular.module("githubViewer",[]);
而不是getting
创建的模块:
var app = angular.module("githubViewer");
一个模块应该创建一次,然后检索并添加控制器、配置、工厂等...
Here 一些帮助。
我正在关注这个 video tutorial 并在匆忙中搞砸了。问题是我摆脱了 所有 我犯的错误,但是它仍然没有按预期工作。搜索表单框不显示。
可在此处找到完整代码:plnkr code
index.html
<!DOCTYPE html>
<html ng-app="githubViewer">
<head>
<script data-require="angular.js@1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
<script data-require="angular-route@*" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular-route.js"></script>
<link rel="stylesheet" href="style.css" />
<script scr="app.js"></script>
<script src="MainController.js"></script>
<script src="github.js"></script>
</head>
<body >
<h1>Gihub Viewer</h1>
<div ng-view></div>
</body>
</html>
app.js
(function(){
var app = angular.module("githubViewer", ["ngRoute"]);
app.config(function($routeProvider){
$routeProvider
.when("/main", {
templateUrl: "main.html",
controller: "MainController"
})
.otherwise({redirectTo:"/main"});
});
}());
main.html
<div>
{{ countdown }}
<form name="searchUser" ng-submit="search(username)">
<input type="search" required="" placeholder="Username to find"
ng-model="username" />
<input type="submit" value="Search" />
</form>
</div>
任何帮助将不胜感激
基本上你所有的js文件都有错误的IIFE pattern.wrong
应该是
})();
而不是
}());
还有错别字。在 index.html:
<script scr="app.js"></script>
必须是:
<script src="app.js"></script>
并在 MainController.js。此代码:
app.controller("MainControler", MainController);
必须改为:
app.controller("MainController", MainController);
您误解了如何实现模块和控制器。在 MainController.js 和 app.js 中,您都有以下行:
var app = angular.module("githubViewer", ["ngRoute"]);
angular.module
实际上创建了一个新模块。您实际上是在尝试创建两个具有相同名称的模块,这是不允许的。
要遵循的模式是
var app = angular.module(...)
app.config(...)
var controller = app.controller("MainController", ["$scope", function() {
]]);
如果您确实希望 MainController
代码位于单独的文件中,请创建一个函数:
function createMainController(app) {
app.contoller("MainController", ...)
}
问题是您在控制器和工厂代码中重新定义了模块:
var app = angular.module("githubViewer",[]);
而不是getting
创建的模块:
var app = angular.module("githubViewer");
一个模块应该创建一次,然后检索并添加控制器、配置、工厂等...
Here 一些帮助。