Question

我已经使用yeoman生成器来生成我的应用程序，我决定将我的应用程序复制到一个干净的文件夹中，但接缝表明rounting没有按预期工作，模板根本没有加载

我的应用js

  'use strict';

    angular
      .module('angularJsApp', ['ngRoute'])
      .config(function ($routeProvider) {
        $routeProvider
          .when('/', {
            templateUrl: 'views/home.html',
            controller: 'main',
            controllerAs: 'mainController'
          })
          .when('/users', {
            templateUrl: 'views/users.html',
            controller: 'main',
            controllerAs: 'mainController'
          })
          .when('/active_users', {
            templateUrl: 'views/active_users.html',
            controller: 'second',
            controllerAs: 'secondController'
          })
          .otherwise({
            redirectTo: '/'
          });
      });

控制器

'use strict';


// users factory
angular.module('angularJsApp').factory("myFactory", function() {

    var existingEntries = JSON.parse(localStorage.getItem("allEntries"));

    var persoane = existingEntries;

    var factory = {};

    factory.getPersons = function() {
        return {
            existingEntries: existingEntries,
            persoane: persoane
        };
    }

    return factory;

});




// modules
angular.module('angularJsApp').controller('main', function($scope, myFactory) {

    var dataMain = this;


    $scope.adaugaperson = function() {

        var name = $scope.newName;
        var lastname = $scope.newLastName;
        var tel = $scope.newPhone;
        var email = $scope.newEmail;
        var age = $scope.newAge;
        var gender = $scope.newGender;



        var entry = {
            "name": name,
            "lastname": lastname,
            "tel": tel,
            "email": email,
            "age": age,
            "gender": gender,
            "isChecked": false
        };


        // sf not having any entry, crate 
        if ($scope.existingEntries == null) $scope.existingEntries = [];
        localStorage.setItem("entry", JSON.stringify(entry));
        // save allEntries back to local storage
        $scope.existingEntries.push(entry);

        localStorage.setItem("allEntries", JSON.stringify($scope.existingEntries));

        // reset the form 
        $scope.newName = '';
        $scope.newLastName = '';
        $scope.newPhone = '';
        $scope.newEmail = '';
        $scope.newAge = '';
        $scope.newGender = '';

    };

    // get persons
    initPersons();

    function initPersons() {

        $scope.persoane = myFactory.getPersons().persoane;
        $scope.existingEntries = myFactory.getPersons().existingEntries;
    }


    // remove person
    $scope.remove = function(indexNumber) {

        $scope.existingEntries.splice(indexNumber, 1);
        localStorage.setItem("allEntries", JSON.stringify($scope.existingEntries));

    }


    // var for index targeting
    var indexValue = undefined;


    // populate form 
    $scope.populate = function(indexNumber) {
        indexValue = indexNumber;
        $scope.newName = $scope.existingEntries[indexNumber]["name"]
        $scope.newLastName = $scope.existingEntries[indexNumber]["lastname"];
        $scope.newPhone = $scope.existingEntries[indexNumber]["tel"];
        $scope.newEmail = $scope.existingEntries[indexNumber]["email"];
        $scope.newAge = $scope.existingEntries[indexNumber]["age"];
        $scope.newGender = $scope.existingEntries[indexNumber]["gender"];
    }


    // save edited user
    $scope.editUser = function(indexNumber) {
        indexNumber = indexValue;
        $scope.existingEntries[indexValue]["name"] = $scope.newName;
        $scope.existingEntries[indexValue]["lastname"] = $scope.newLastName;;
        $scope.existingEntries[indexValue]["tel"] = $scope.newPhone;
        $scope.existingEntries[indexValue]["email"] = $scope.newEmail;
        $scope.existingEntries[indexValue]["age"] = $scope.newAge
        $scope.existingEntries[indexValue]["gender"] = $scope.newGender;

        $scope.newName = "";
        $scope.newLastName = "";
        $scope.newPhone = "";
        $scope.newEmail = "";
        $scope.newAge = "";
        $scope.newGender = "";

        localStorage.setItem("allEntries", JSON.stringify($scope.existingEntries));


    }


    // active users state
    $scope.activeUsers = function(indexNumber) {
        indexValue = indexNumber;
        $scope.boolVal = $scope.existingEntries[indexNumber]["isChecked"];

        if ($scope.boolVal === false) {
            $scope.existingEntries[indexNumber]["isChecked"] = true;
        } else {
            $scope.existingEntries[indexNumber]["isChecked"] = false;
        }

        localStorage.setItem("allEntries", JSON.stringify($scope.existingEntries));
    }
});



// controler for users active
angular.module('angularJsApp').controller('second', function($scope, myFactory) {

    init();

    function init() {
        $scope.persoane = myFactory.getPersons().persoane;
        $scope.existingEntries = myFactory.getPersons().existingEntries;
    }
});

HTML

<!doctype html>
<html xmlns:ng="http://angularjs.org" ng-app>
  <head>
    <meta charset="utf-8">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
    <!-- build:css(.) styles/vendor.css -->
    <!-- bower:css -->
    <link rel="stylesheet" href="components/bootstrap/dist/css/bootstrap.css" />
    <!-- endbower -->
    <!-- endbuild -->
    <!-- build:css(.tmp) styles/main.css -->
    <link rel="stylesheet" href="styles/main.css">
    <!-- endbuild -->
  </head>
  <body ng-app="angularJsApp">
    <!--[if lte IE 8]>
      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->

    <!-- Add your site or application content here -->
    <div class="header">
      <div class="navbar navbar-default" role="navigation">
        <div class="container">
          <div class="navbar-header">

            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#js-navbar-collapse">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>

            <a class="navbar-brand" href="#/">angularJs</a>
          </div>

          <div class="collapse navbar-collapse" id="js-navbar-collapse">

            <ul class="nav navbar-nav">
              <li><a href="#/">Home</a></li>
              <li><a ng-href="#!/active_users">Active Users</a></li>
              <li><a ng-href="#!/users/">Users</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <div class="container">
    <div ng-view>

    </div>


    </div>

    <div class="footer">
      <div class="container">
      </div>
    </div>

    <!-- build:js(.) scripts/vendor.js -->
    <!-- bower:js -->
    <script src="components/jquery/dist/jquery.js"></script>
    <script src="components/angular/angular.js"></script>
    <script src="components/bootstrap/dist/js/bootstrap.js"></script>

    <!-- endbower -->
    <!-- endbuild -->

        <!-- build:js({.tmp,app}) scripts/scripts.js -->
        <script src="scripts/app.js"></script>
        <script src="scripts/controllers/main.js"></script>
        <!-- endbuild -->
</body>
</html>

Answer 1

从ng-app代码中删除未指定模块的html指令，显然它不允许ng-app="angularJsApp"放置在body代码上。

来自文档

每个HTML只能自动引导一个AngularJS应用程序文献。文档中找到的第一个ngApp将用于定义作为应用程序自动引导的根元素。

此外，您必须在angular-route.js

之后添加angular.js

<script src="components/angular/angular.js"></script>
<script src="components/angular/angular-route.js"></script>

使用yeoman发生器后，角度js路由无法加载

1 个答案: