Question

HTML文件

   <!DOCTYPE html>
    <html ng-app="tutorialApp">
    <head>
        <meta charset="UTF-8">
        <title>Tutorial App</title>
        <script src="lib/angular.min.js"></script>
        <script src="lib/angular-route.min.js"></script>
        <script src="JS/app.js"></script>
        <script src="JS/controller/tutorialCtrl.js"></script>

    </head>
    <body>
    <div ng-view></div>

    </body>
    </html>

js file

var app = angular.module("tutorialApp", ["ngRoute", "tutorialCtrlModule"]);

app.config(function ($routeProvider) {
    $routeProvider
        .when("/", {
            templateUrl: "views/tutorial.html",
            controller: "TutorialCtrl"
    })
        .when("/tutorialSecond", {
            templateUrl: "views/tutorialSecond.html",
            controller: "TutorialCtrl2"
        })
        .otherwise({
            redirectTo: "/"
        });
});

当我运行HTML文件时，我会看到第一页。当我点击链接我创建的链接时，它不会让我到链接。对于js文件，有一个错误“ReferenceError：angular is not defined” 我不知道该怎么做。

Answer 1

在你的tutorialCtrl.js文件中你只需定义你的控制器名称，我想这可能对你有帮助。

app.controller('TutorialCtrl', ['$scope',function ($scope) {

}]);
app.controller('TutorialCtrl2', ['$scope',function ($scope) {

}]);

Answer 2

您的本地文件可能是从您的文件系统（带有file：// URI）而不是本地网站（带有http://localhost/）加载的，并且资源在file：// lib中不可用/angular.min.js。

最好使用本地Web服务器进行测试，因为有很多东西（尤其是Ajax，你正在使用它们）在file：//和http：//之间的工作方式不同。

Answer 3

我弄清楚问题是什么。我必须把：

app.config(function ($routeProvider, $locationProvider) {
$locationProvider.hashPrefix('');

进入app.js.所以它会是这样的：

var app = angular.module ("groceryListApp", ["ngRoute"]);

app.config(function ($routeProvider, $locationProvider) {
    $locationProvider.hashPrefix('');
    $routeProvider
        .when("/", {
            templateUrl: "views/groceryList.html",
            controller: "GroceryListItemsController"
        })
        .when("/addItem", {
            templateUrl: "views/addItem.html",
            controller: "GroceryListItemsController"
        })
        .when("/addItem/:id/:cat", {
            templateUrl: "views/addItem.html",
            controller: "GroceryListItemsController"
        })
        .otherwise({
            redirect: "/"
        })
});
app.controller("HomeController", ["$scope", function ($scope) {
    $scope.appTitle = "Grocery List";
}]);

app.controller("GroceryListItemsController", ["$scope", "$routeParams", function ($scope, $routeParams) {

    $scope.groceryItems = [
        {completed: true, itemName: 'milk', date: '2017-05-01'},
        {completed: true, itemName: 'cookies', date: '2017-05-01'},
        {completed: true, itemName: 'ice cream', date: '2017-05-02'},
        {completed: true, itemName: 'potatoes', date: '2017-05-02'},
        {completed: true, itemName: 'cereal', date: '2017-05-03'},
        {completed: true, itemName: 'bread', date: '2017-05-03'},
        {completed: true, itemName: 'eggs', date: '2017-05-04'},
        {completed: true, itemName: 'tortillas', date: '2017-05-04'}
    ]

    $scope.rp = "Route Paramater Value: " + $routeParams.id + + $routeParams.cat;

}]);

为什么我这样做是因为Angular的更新从1.5到1.6，＆＃39;＃！＆＃39;是新的默认哈希前缀。

Answer 4

好吧，我觉得它可能比你想象的要简单：大多数人不会把ng-app放在html标签中，而是放在div或body标签中：因为html标签是在头部之前呈现的所以我相信这就是问题。

在Angular js中出现错误“ReferenceError：angular is not defined”

4 个答案: