2016-08-08 4 views
0

У меня есть моя главная страница, из которой я хочу сделать маршрутизацию, но когда я начинаю эту страницу, я ничего не вижу, и в браузере нет #/пение здесь, я застрял, я новичок, поэтому я был бы признателен за любую помочь это мой код с главной страницы:My AngularJS маршрутизация не работает?

<!DOCTYPE html> 
<html data-ng-app="myApp"> 
<head> 
    <title></title> 
    <meta charset="utf-8" /> 
    <link href="Content/bootstrap.min.css" rel="stylesheet" /> 
    <script src="Scripts/bootstrap.min.js"></script> 
    <script src="Scripts/angular.min.js"></script> 
</head> 
<body> 
    <div> 
     <div data-ng-view=""></div> 
    </div> 

    <script> 
     var myApp = angular.module("myApp", []).controller("SimpleController", ['$scope', function ($scope) { 

      $scope.contacts = [ 
       { name: "Jhony", tel: "0338987121" }, 
       { name: "JhonyK", tel: "03332443545" }, 
       { name: "JhonyKun", tel: "03385666767" }, 
       { name: "Nick", tel: "12232434343" }, 

      ]; 

      $scope.styleDemo = function() { 
       if (!$scope.styler) { 
        return; 
       } 

       return { 
        background: "red", 
        fontWeight: "bold", 
       }; 
      } 
     }]).filter('truncate', function() { 
      return function (input, limit) { 
       return (input.length > limit) ? input.substr(0, limit) + '...' : input; 
      }; 
     }).controller("addController", ['$scope', function ($scope) { 

      $scope.customers = [ 
       { name: "Jhony", code: "12323232" }, 
       { name: "JhonyK", code: "133443453" }, 
       { name: "JhonyKun", code: "165768787" }, 
       { name: "Nick", code: "14323232434" }, 
       { name: "NickK", code: "1897872323" }, 
       { name: "NickKun", code: "156656523323" }, 
      ] 

      $scope.addCustomer = function() { 
       $scope.customers.push({ name: $scope.newCustomer.name, code: $scope.newCustomer.code }); 
      } 
     }]); 

     myApp.config(function ($routeProvider) { 
      $routeProvider.when('/', 
        { 
         controller: "SimpleController", 
         templateUrl: "HtmlPage2.html" 
        }) 
      .when('/add', 
      { 
       controller: 'addController', 
       templateUrl: 'add.html' 
      }) 
      .otherwise(
      { 
       redirectTo: '/' 
      }); 
     }); 
    </script> 
</body> 
</html> 

Вот моя страница HtmlPage2.html:

<div class="container"> 
    <input type="text" ng-model="search.tel" /> 
    <ul> 
     <li data-ng-repeat="con in contacts|filter:search.tel|orderBy:'name':true" ng-cloak>{{con.name}}-{{con.tel}}</li> 
    </ul> 
    <div class="row"> 
     <div class="col-md-8"> 
      <p ng-class="{'text-center':center,'text-danger':error}" ng-style="styleDemo()"> 
       {{725508723000|date:"h 'o''clock'"}} 
      </p> 
      <input type="checkbox" ng-model="center"/> 
      <input type="checkbox" ng-model="error" /> 
      <label><input type="checkbox" ng-model="styler"/>ng-style</label> 
      <p>{{'Lorem ipsum dolar sit amet'|truncate:15}}</p> 
     </div> 
    </div> 

</div> 
<a href="#/add">Add page</a> 

И моя страница Добавить:

<div class="container"> 
    <div class="jumbotron"> 
     <h1>This is my add page</h1> 
    </div> 
    Customer Name:<br /> 
    <input type="text" data-ng-model="newCustomer.name"/><br /><br /> 
    Customer City:<br /> 
    <input type="text" data-ng-model="newCustomer.code"/><br /><br /> 
    <button data-ng-click="addCustomer()">Add customer</button><br /><br /><br /> 
    Filter:<br /> 
    <input type="text" data-ng-model="customer.name" /><br /> 
    <ul> 
     <li data-ng-repeat="customer in customers|filter:customer.name">{{customer.name}}-{{customer.code}}</li> 
    </ul> 
</div> 

Я получил эту консоль ошибок, но я я nsert JQuery и до сих пор ничего:

Error: Bootstrap's JavaScript requires jQuery
angular.min.js:40Error: [$injector:modulerr] http://errors.angularjs.org/1.5.8/ $injector/modulerr?p0=myApp&p1=%5B%24injector%3Aunpr%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.5.8%2F%24injector%2Funpr%3Fp0%3D%2524routeProvider

+1

Вы видели какую-либо ошибку в консоли ?? – Keshav

+0

Я забыл, что должен увидеть thx за советом – jhony3

+1

У вас есть неограниченный угловой скрипт? например: ''. Если вы это сделаете, измените его и покажите новую консольную ошибку. Кроме того, вы вставили скрипт jQuery перед угловым? – AranS

ответ

0

Вы должны включать в себя угловую-route.min.js файл вам HTML и добавить ngRoute как зависимость от вашего приложения.

Если вы добавляете этот файл в свое приложение, вы можете добавить его на свою страницу с помощью кода ниже.

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

Если вы хотите включить его из Google CDN, используйте нижеприведенный код.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28//angular-route.min.js"></script> 

Затем загрузите модуль ngRoute в приложении AngularJS, добавив его в качестве зависимого модуля, как показано ниже:

var myApp = angular.module("myApp", ['ngRoute']).controller("SimpleController", ['$scope', function ($scope) { 
//your controller code goes here 
}]); 
+0

Я сделал это сам до thx в любом случае – jhony3

+0

Есть ли какие-либо ошибки в консоли ?? – Keshav