![ル`ティングC嬬
9
angular.module('myApp', [ 'ngRoute' ])
.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/', {
templateUrl: 'views/home.html',
controller: 'HomeController'
})
.when('/contents', {
templateUrl: 'views/contents.html',
controller: 'ContentsController'
})
.when('/tags', {
templateUrl: 'views/tags.html',
controller: 'TagsController'
})
.otherwise({
redirectTo: '/'
});
}]);
?
<ul>
<li><a ng-href="#/home">ホ`ム</a></li>
<li><a ng-href="#/contents">並をiむ</a></li>
<li><a ng-href="#/tags">vBタグを燕幣</a></li>
</ul>
<!-- コンテンツの托めzみ枠-->
<div ng-view></div>
?
sampCtrl.js
samp.html](https://image.slidesharecdn.com/20161125angularjs-161206003157/85/20161125-angular_js-10-320.jpg)
![Ajax宥佚C嬬
10
jQuery吉で掲揖豚宥佚を佩う栽に庇Lになりが
ちなコ`ドをシンプルに峰することが辛嬬。
angular.module('myApp', [])
.controller('MyController', ['$scope', '$http', function($scope, $http) {
$scope.onclick = function() {
// 1 サ`バ`にしてリクエストを僕佚
$http.get(
｀/XXXXX/XXXXX,{
params: { name: $scope.name }
}
)
// 2 撹孔rのI尖
.success(function(data, status, headers, config){
$scope.result = data;
})
// 3 払rのI尖
.error(function(data, status, headers, config){
$scope.result = '宥佚払。';
});
}](https://image.slidesharecdn.com/20161125angularjs-161206003157/85/20161125-angular_js-11-320.jpg)
More Related Content
Similar to 20161125 致弥 angular_jsを乾ってみた (9)
20161125 致弥 angular_jsを乾ってみた
- 3. はじめに ? 黎 C AngularJS って採ですか燭泙拭乾った並がない繁 C クライアントサイドについてのd龍のある繁 ? EにHしての廣吭 C k燕宀徭附も、書指兵めてAngularJSに乾れたため、參和のこと を便してご賠和さい。 ? 嗤R宀の繁は梁かい朕と串でいて和さい。 ? い凛高を鬚韻覆い馬造気ぁ ? 峺姜並はH氏でそっと擦┐討ださい。 2
- 6. 蒙罾秘T ? HTMLベ`スのテンプレ`トC嬬 ? 褒圭鬟禰`タバインディング ? ル`ティングC嬬 ? Ajax宥佚C嬬 ´貧參翌にも、宴旋なC嬬、蒙罿呂△蠅泙垢、云晩はこの殻業に します。これをきっかけにどんなものか乾って、徭蛍で{べてて和 さい。 5
- 7. HTMLベ`スのテンプレ`トC嬬 HTMLをそのままテンプレ`トとして聞喘し、 DOMの岷俊峺協を佩わない蕁▲芥`ド楚が富なく 辛i來、隠便來が互くなりやすい。 6 <!doctype html> <html ng-app> ? <script src=/slideshow/20161125-angularjs/69854156/"https:/ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script> ? <p>{{myModel}}</p> <div><input type="text" ng-model="myModel"></div>
- 8. 褒圭鬟禰`タバインディング 褒圭鬟禰`タバインディングとは、褒圭のデ`タ をO?厚仟して、械に揖豚を蹐襪海函 7 <!doctype html> <html ng-app> ? <script src=/slideshow/20161125-angularjs/69854156/"https:/ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script> ? <p>{{myModel}}</p> <div><input type="text" ng-model="myModel"></div> TEXTボックスに秘薦と揖rに 仝Hellow!!々が燕幣される
- 10. ル`ティングC嬬 9 angular.module('myApp', [ 'ngRoute' ]) .config(['$routeProvider', function($routeProvider){ $routeProvider .when('/', { templateUrl: 'views/home.html', controller: 'HomeController' }) .when('/contents', { templateUrl: 'views/contents.html', controller: 'ContentsController' }) .when('/tags', { templateUrl: 'views/tags.html', controller: 'TagsController' }) .otherwise({ redirectTo: '/' }); }]); ? <ul> <li><a ng-href="#/home">ホ`ム</a></li> <li><a ng-href="#/contents">並をiむ</a></li> <li><a ng-href="#/tags">vBタグを燕幣</a></li> </ul> <!-- コンテンツの托めzみ枠--> <div ng-view></div> ? sampCtrl.js samp.html
- 11. Ajax宥佚C嬬 10 jQuery吉で掲揖豚宥佚を佩う栽に庇Lになりが ちなコ`ドをシンプルに峰することが辛嬬。 angular.module('myApp', []) .controller('MyController', ['$scope', '$http', function($scope, $http) { $scope.onclick = function() { // 1 サ`バ`にしてリクエストを僕佚 $http.get( ｀/XXXXX/XXXXX,{ params: { name: $scope.name } } ) // 2 撹孔rのI尖 .success(function(data, status, headers, config){ $scope.result = data; }) // 3 払rのI尖 .error(function(data, status, headers, config){ $scope.result = '宥佚払。'; }); }
- 14. 歌深URL ? AngularJS秘Tその1 C http://dev.classmethod.jp/client-side/javascript/angularjs-1/ ? アズ茶 C http://liruu.com/angularjs/angularjs-note/ ? AngularJS秘T (畠12指) - プログラミングなら ドットインスト`ル C http://dotinstall.com/lessons/basic_angularjs 13