★In Angular applications, the view is the Document Object Model (DOM), the controllers
are JavaScript classes, and the model data is stored in object properties.
★Dependency injection lets us follow a development style in which, instead of creating dependencies,
our classes just ask for what they need.This follows a design pattern called the Law of Demeter, also known as the principle of
least knowledge.
==>scope,location
最小知識の原則ーー＞簡潔に言うと「直接の友達とだけ話すこと」と要約できる。友達の友達であるクラスと関係をもってはいけない
★Angular comes with many HTML extension directives that help you define the view for your app
★<script src-"">
Using Google’s CDN is recommended. Google’s servers are fast, and the script is cacheable
across applications. That is, if your user has multiple apps that use Angular, she’ll
have to download only it once. Also, if the user has visited other sites that use the Google
CDN link for Angular, she won’t need to download it again when visiting your site.
★
With modules, and the dependency injection we get from them, we can write our controller
much more simply, like this:
＝＝＞
function ShoppingController($scope, Items) {
$scope.items = Items.query();
}
＝＝ー＞The preceding code assumes that we’ve defined Items as a service
Services are singleton (single-instance) objects that carry out the tasks necessary to
support your application’s functionality. Angular comes with many services like $loca
tion, for interacting with the browser’s location, $route, for switching views based on
location (URL) changes, and $http, for communicating with servers.
You can, and should, create your own services to do all of the tasks unique to your
application. Services can be shared across any controllers that need them. As such,
they’re a good mechanism to use when you need to communicate across controllers and
share state. Angular’s bundled services start with a $, so while you can name them
anything you like, its a good idea to avoid starting them with $ to avoid naming collisions.
＝＝＝＞Springみたいね。。。
・factory(name,$getFunction)、A non-configurable service with complex creation logic. You specify a function that, when
called, returns the service instance.
・provider(name,object)、A configurable service with complex creation logic. If you pass an Object, it should have a
function named $get that returns an instance of the service.
・service(name,constructor())=->
例：
// Create a module to support our shopping views
var shoppingModule = angular.module('ShoppingModule', []);
// Set up the service factory to create our Items interface
shoppingModlue.factory('Items',function(){
var itmes={};
items.query= function(){
return[
{name:'l',sex:'1'},
{name:'m',sex:'1'},
{name:'n',sex:'1'}
];
};
return items;
});
function ShoppingController($scope, Items) {...}
==>When Angular creates the ShoppingController, it will pass in $scope and the new
Items service that we’ve just defined. This is done by parameter name matching. That
is, Angular looks at the function signature for our ShoppingController class, and
notices that it is asking for an Items object. Since we’ve defined Items as a service, it
knows where to get it
To get this to work with our template, we need to tell the ng-app directive the name of
our module, like the following:
<html ng-app='ShoppingModule'>
・In most applications, it will work well enough to create a single module for all the code
you create and put all of your dependencies in it.
・みたいな、自分でfilterも定義できる
var homeModule = angular.module('HomeModule',[]);
homeModule.filter('titleCase',fuction(){
var myownFilter = function(input){
}
return myownFileter;
}
);
・Though AJAX apps are technically single-page apps (in the sense that they only load an
HTML page on the first request, and then just update areas within the DOM thereafter),
we usually have multiple sub-page views that we show or hide from the user, as appropriate.
==>AJAXはそんな事をやっている？なるほど～
・$routeProvider
var someModule = angular.module('someModule', [...module dependencies...])
someModule.config(function($routeProvider) {
$routeProvider.
when('url', {controller:aController, templateUrl:'/path/to/tempate'}).
when(...other mappings for your app...).
…
otherwise(...what to do if nothing else matches...);
)};
・talk to the server
==>そんなに重いことはない。。
function ShoppingController($scope, $http) {
$http.get('/products').success(function(data, status, headers, config) {
$scope.items = data;
});
}
・自分のderectiveを作る。
var appModule = anguler.module('appModule',[...]);
appModule.directive('directiveName',directiveFunction);
ng-option room.name for room in rooms
ng-model
ng-change
ng-submit
==>
・ng-repeat="msg in msgs | limitTo:-4"
★A module is a collection of services, directives, controllers, filters, and configuration information.
・var myModule=angular.module('myModule',[])
[]コレクションだね。。
・myModule.value('appName','MyCoolApp');
Then you can create an injector and load your modules like this:
var injector = angular.injector(['ng', 'myModule'])