代码之家  ›  专栏  ›  技术社区  ›  Iulian Constantin Redinciuc

使用yeoman发电机后未加载

  •  0
  • Iulian Constantin Redinciuc  · 技术社区  · 7 年前

    我已经使用yeoman generator生成了我的应用程序,我决定将我的应用复制到一个干净的文件夹中,但由于Rount没有按预期工作,模板根本没有加载

      '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>
    
    1 回复  |  直到 7 年前
        1
  •  1
  •   Pankaj Parkar charlietfl    7 年前

    去除 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>