.config $ routeprovider angularjs

时间:2014-02-13 12:44:09

标签: html angularjs route-provider

我正在使用angularjs ..

mainhtml.html

<!DOCTYPE html>
<html data-ng-app="demoapp">
<head>
    <script src="scripts/angular.min.js"></script>
    <title>Angular js</title>
</head>
 <body> <div data-ng-controller="SimpleController">
     <div data-ng-view=""></div>

<div class="ng-view"></div>
    Name:<input type="text" data-ng-model="name" />{{name}}
    <br />
    <ul>
        <li data-ng-repeat="cust in customers|filter:name|orderBy:'city'">{{cust.name|uppercase}}-{{cust.city|lowercase}}</li>
    </ul>
        <script>
            var demoapp = angular.module('demoapp', []);
            demoapp.config(['$routeProvider',
          function ($routeProvider) {
         $routeProvider.
          when('/', {
            templateUrl: 'view1.html',
            controller: 'SimpleController'
        }).
        when('/partial2', {
            templateUrl: 'view2.html',
            controller: 'SimpleController'
        }).
        otherwise({
            redirectTo: '/'
        });
  }]);
demoapp.controller('SimpleController', function ($scope) {
                $scope.customers = [{ name: 'aman', city: 'boom' },
                                     { name: 'ajay', city: 'reem dee' },
                                     { name: 'hood', city: 'meen' }
                ];
            });

        </script>
    </div>
</body>
</html>

厂景

<div class="container">
    <h2>View1</h2>
Name:
    <input type="text" data-ng-model="filter.name" />
    <br />

   <ul>
       <li data-ng-repeat="cust in customers|filter :filter.name|orderby"></li>
</ul>
    <br />
    Customer name:
    <input type="text" data-ng-model="newCustomer.name"/>
    <br />
    <br />
    Customer city:
    <input type="text" data-ng-model="newCustomer.city"/>
    <br />
    <br />
    <button data-ng-click="addCustomer()">Add customer</button>
    <br />
    <a href="#/view2">View2</a>
</div>

在添加config($ routeprovider)函数之前它运行良好,,,, routeprovider函数正在破坏程序... anyhelp正常工作

1 个答案:

答案 0 :(得分:3)

你可能

错过了包含角度路线

<script data-require="angular-route@1.2.12" data-semver="1.2.12" src="http://code.angularjs.org/1.2.12/angular-route.js"></script>

下一步是将依赖项添加到ngRoute模块,如下所示

var demoapp = angular.module('demoapp', ['ngRoute']);

享受生活样本:http://plnkr.co/edit/sgQGz0JHjKk4CRcoZSUf?p=preview

btw:这里有更多信息

  1. https://egghead.io/lessons/angularjs-routeprovider-api
  2. http://viralpatel.net/blogs/angularjs-routing-and-views-tutorial-with-example/
  3. official angular page