main.html中。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="demoApp"><!--you can use  data-ng-app directive also-->
<head>
<title>Using Directive With DataBinding</title>
<script src="Scripts/angular.min.js"></script>

<script>
    //var demoApp = angular.module('demoApp', ['helperModule']);
    var demoApp = angular.module('demoApp', []);

    demoApp.config(function($routeProvider) {
        $routeProvider
            .when('/', {
                controller: 'SimpleController',
                templateUrl: 'View1.html'
            })
            .when('/view2', {
                controller: 'SimpleController',
                templateUrl: 'View2.html'
            })
            .otherwise({ redirectTo: '/' });
    });
    var controllers = {};
    controllers.SimpleController = function ($scope) { // here $scope is dependency injection
        $scope.customers = [
            { name: 'Sombir', city: 'Rohtak' },
            { name: 'Surender', city: 'Hissar' },
            { name: 'Virender', city: 'Panipat' },
            { name: 'Kapil', city: 'Jhajjar' }
        ];
        $scope.addCustomer = function() {
            $scope.customers.push(
            {
                name: $scope.newCustomer.name,
                city: $scope.newCustomer.city   
            });
        };
    };
    demoApp.controller(controllers);
</script>
</head>
<body>
<div>
    <div data-ng-view=""><!--PlaceHolder for views--></div>
</div>    
</body>
</html>


View1.html
-----------------

<div class="container">
    Name:
    <input type="text" ng-model="filter.name" /><!--you can use data-ng-model directive also-->

    <h3>Adding A simple Controller --View1</h3>
    <ul>
        <li data-ng-repeat="cust in customers | filter:filter.name | orderBy:'city'">{{cust.name | uppercase}}---{{cust.city}}</li>
    </ul>
    <br/>
    Customer Name:
    <input type="text" ng-model="newCustomer.name"/>
    Customer City:
    <input type="text" ng-model="newCustomer.city" />
    <br/>
    <button ng-click="addCustomer()">Add Customer</button>
    <a href="#/View2">View2</a>
</div>

Answer 1

您忘记在脚本标记

中的模块'demoApp'中注入'ngRoute'

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

AngularJs中的$ routeProvider不工作

main.html中。

1 个答案: