AngularJS+Bootstrap综合应用案例
1.index.html中<div data-ng-view>内的HTML会根据路由变化而变化
index.html
<body> <div class="container"> <div class="row"> <div class=col-xs-12> <h1><span class="glyphicon glyphicon-headphones" aria-hidden="true"></span>Music Artists</h1> </div> </div> <div class="row"> <div class="col-xs-12"> <div data-ng-view></div> </div> </div> </div>
</body>
2.当点击Item时<div data-ng-view>显示修改HTML页面。
view-detail.html
<div class="form-group"> <label for="txtname">Artist Name:</label> <input type="text" id="txtName" class="form-control" data-ng-model="Item.Name" /> </div> <div class="form-group"> <label for="cboGenre">Artist Genre:</label> <select name="cboGenre" id="cboGenre" class="form-control" data-ng-model="Item.Genre"> <option></option> <option value="Rock">Rock</option> <option value="Alternative">Alternative</option> <option value="Rap">Rap</option> </select> </div> <div class="form-group"> <label for="cboRaating">Artist Genre:</label> <select name="cboRating" id="cboRating" class="form-control" data-ng-model="Item.Rating"> <option></option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> </div> <div class="form-group"> <button class="btn btn-primary" data-ng-click="save()">Save</button> <button class="btn btn-primary" data-ng-click="cancel()">Cancel</button> </div>
3.index中默认显示的HTML.
view-list.html
<div class="form-group"> <input type="text" class="form-control" id="search" placeholder="Search artists" data-ng-model="search" /> <!--<h1>{{search}}</h1>--> </div> <table class="table table-striped table-hover"> <tr> <th>Artistname</th> <th>Genre</th> <th>Rating</th> </tr> <tr data-ng-repeat="item in data | filter:search" data-ng-click="editItem($index)"> <td>{{item.Name}}</td> <td>{{item.Genre}}</td> <td>{{item.Rating}}</td> </tr> </table> <div class="form-group"> <button data-ng-click="addArtist()" class="btn btn-primary">Add Artist</button> </div> 4.控制器部分
script.js
// Code goes here var app = angular.module("musicApp", ["ngRoute"]); app.config(function($routeProvider) { $routeProvider.when("/Items", { templateUrl: "view-list.html", controller: "listController", }) .when("/Items/add", { templateUrl: "view-detail.html", controller: "addController" }) .when("/Items/:Foo", { templateUrl: "view-detail.html", controller: "editController" }) .otherwise({ redirectTo: "/Items" }) }); app.factory("musicService", ["$rootScope", function($rootScope) { var svc = {}; var data = [{ Name: "Grouplove", Genre: "Alternative", Rating: 4 }, { Name: "The Bealtes", Genre: "Rock", Rating: 5 }, { Name: "The cure", Genre: "New wave", Rating: 4 }, { Name: "The Bealtes2", Genre: "Rock2", Rating: 3 }, { Name: "The cure2", Genre: "New wave2", Rating: 5 }]; svc.getArtists = function() { return data; }; svc.addArtists = function(artist) { data.push(artist); }; svc.editArtist = function(index, artist) { data[index] = artist; }; return svc; }]); app.controller("listController", ["$scope", "$location", "$routeParams", "musicService", function($scope, $location, $routeParams, musicService) { $scope.data = musicService.getArtists(); $scope.addArtist = function() { alert("add"); $location.path("/Items/add"); }; $scope.editItem = function(x) { alert("edit"); $location.path("/Items/" + x); }; } ]); app.controller("addController", ["$scope", "$location", "$routeParams", "musicService", function($scope, $location, $routeParams, musicService) { $scope.save = function() { musicService.addArtists({ Name: $scope.Item.Name, Genre: $scope.Item.Genre, Rating: $scope.Item.Rating }); $location.path("/items"); }; $scope.cancel = function() { $location.path("/Items1"); } } ]); app.controller("editController", ["$scope", "$location", "$routeParams", "musicService", function($scope, $location, $routeParams, musicService) { $scope.Item = musicService.getArtists()[parseInt($routeParams.Foo)]; $scope.save = function() { musicService.addArtists(parseInt($routeParams.Foo), { Name: $scope.Item.Name, Genre: $scope.Item.Genre, Rating: $scope.Item.Rating }); $location.path("/Items"); }; $scope.cancel = function() { $location.path("/Items"); } } ]);
效果图如下：
