나는 오랫동안 아무것도 쓰지 않았으며, 글을 쓰기 시작하는 곳을 모른다고 생각합니다. 이제 기술을 먼저 쓰는 것이 좋습니다. Angularjs, 내 동생은 그것을 "내 동생 JS"라고 불렀습니다.
1. 다운로드
코드 사본은 다음과 같습니다.
官方网址：https://angularjs.org/
CDN：https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.5/angular.min.js
2. 1.ng-app 사용에 대한 간단한 소개
Angularjs의 범위를 결정하면 다음과 같이 사용할 수 있습니다.
코드 사본은 다음과 같습니다.
<html ng-app>
…
</html>
Angularjs가 전체 페이지를 렌더링하게하면 사용할 수도 있습니다.
코드 사본은 다음과 같습니다.
<div ng-app = 'myapp'>
...
</div>
그것의 일부를 렌더링합니다.
2.ng 모델
ng-model, 데이터 모델이 변경되면 NG-Model = 'Test'가 변경되면이 테스트의 값이 변경되고 {{test}}의 값도 변경됩니다. 즉, NG 모델에 연결된 테스트도 다음과 같이 변경됩니다.
코드 사본은 다음과 같습니다.
<! doctype html>
<html>
<헤드>
<script src = "angular.min.js"type = "text/javaScript"> </script>
<title> Learing argularjs-widuu </title>
</head>
<바디 ng-app>
<입력 ng-model = 'test'> {{test}}
</body>
</html>
3.angular.module
이것은 주로 모듈을 등록, 생성 및 색인에 사용하는 데 사용됩니다. 예를 들어,이를 서비스로 등록하려면 인덱스 모듈을 참조 할 때 사용해야합니다. 또한 인덱스를 참조 할 때도 사용해야합니다.
코드 사본은 다음과 같습니다.
Angular.Module (이름, [요구], [configfn]);
#이름 이름 string으로 생성 된 검색 모듈의 이름
#간단한 이해는 Ngroute 라우팅 모듈과 같은 사용해야하는 사용 모듈입니다.
#configfn 선택적 함수 모듈, 함수는 module.config와 유사합니다.
4. 콘트롤러
컨트롤러는 메소드 컨트롤러 (이름, 생성자)입니다. 여기서 이름은 컨트롤러의 이름이며 생성자는 컨트롤러 생성자입니다. 코드를 사용하여 설명합니다.
코드 사본은 다음과 같습니다.
<! doctype html>
<html>
<헤드>
<script src = "angular.min.js"type = "text/javaScript"> </script>
<script type = "text/javaScript">
var app = angular.module ( 'myapp', []);
app.controller ( 'mytest', function ($ scope) {
$ scope.test = "Hello Word";
});
</스크립트>
<title> Learing argularjs-widuu </title>
</head>
<body ng-app = 'myapp'ng-controller = 'mytest'>
<입력 ng-model = 'test'> {{test}}
</body>
</html>
5. 값
값은 또한 메소드 값 (이름, 개체)입니다. 여기서 이름은 서비스의 이름이며 객체는 서버 인스턴스 객체입니다. 현재 위의 코드를 이와 같이 수정하도록 수정할 수 있습니다.
코드 사본은 다음과 같습니다.
<! doctype html>
<html>
<헤드>
<script src = "angular.min.js"type = "text/javaScript"> </script>
<script type = "text/javaScript">
var app = angular.module ( 'myapp', [])
.Value ( 'testValue', 'Word');
app.controller ( 'mytest', function ($ scope, testValue) {
$ scope.test = "hello"+ testValue;
});
</스크립트>
<title> Learing argularjs-widuu </title>
</head>
<body ng-app = 'myapp'ng-controller = 'mytest'>
<입력 ng-model = 'test'> {{test}}
</body>
</html>
5. factory
공장은 또한 방법 공장 (이름, 제공자 기능) ;; 이름이 서비스 이름 인 경우 제공자 기능은 새 서버 객체를 작성하는 데 사용되는 기능입니다. 현재 위의 코드를 이와 같이 수정하도록 수정할 수 있습니다.
코드 사본은 다음과 같습니다.
<! doctype html>
<html>
<헤드>
<script src = "angular.min.js"type = "text/javaScript"> </script>
<script type = "text/javaScript">
var app = angular.module ( 'myapp', [])
.Value ( 'testValue', 'widuu')
.CARDY ( 'testFactory', function (testValue) {
반품{
lable : function () {
반환 "이것은 출력 할 수 있습니다 : 안녕하세요"+ testValue;
}
}
});
app.controller ( 'mytest', function ($ scope, testValue, testFactory) {
$ scope.test = "hello"+ testValue;
$ scope.output = testFactory.Lable ();
});
</스크립트>
<title> Learing argularjs-widuu </title>
</head>
<body ng-app = 'myapp'ng-controller = 'mytest'>
<입력 ng-model = 'test'> {{test}}
</p>
{{산출}}
</body>
</html>
6. 제공자
공급자는 또한 Angular.Module 제공 업체 (Name, ProviderType)의 메소드 제공자입니다. 여기서 이름은 서비스 이름이며 제공자 기능은 새 서버 객체를 작성하는 데 사용되는 기능입니다. 이것은 공장과 유사합니다. 우리는 이제 제공자와 함께 다시 작성하고 있습니다.
코드 사본은 다음과 같습니다.
<! doctype html>
<html>
<헤드>
<script src = "angular.min.js"type = "text/javaScript"> </script>
<script type = "text/javaScript">
var app = angular.module ( 'myapp', [])
.Value ( 'testValue', 'widuu')
.provider ( 'TestProvider',
기능(){
this.lable = "이것은 출력 : hello widuu";
이. $ get = function () {
이것을 반환하십시오;
}
}
);
app.controller ( 'mytest', function ($ scope, testValue, testProvider) {
$ scope.test = "hello"+ testValue;
$ scope.output = testProvider.Lable;
});
</스크립트>
<title> Learing argularjs-widuu </title>
</head>
<body ng-app = 'myapp'ng-controller = 'mytest'>
<입력 ng-model = 'test'> {{test}}
</p>
{{산출}}
</body>
</html>
7. 서비스
서비스는 또한 메소드 서비스 (이름, 생성자)입니다. 이름이 서비스 이름 인 경우 생성자는 인스턴스화 될 생성자입니다. 이것은 공장과 유사합니다. 우리는 이제 서비스로 그것을 다시 작성하고 있습니다
코드 사본은 다음과 같습니다.
<! doctype html>
<html>
<헤드>
<script src = "angular.min.js"type = "text/javaScript"> </script>
<script type = "text/javaScript">
var app = angular.module ( 'myapp', [])
.Value ( 'testValue', 'widuu')
.Service ( 'testservice',
함수 (testValue) {
this.lable = function () {
반환 "이것은 출력 : 안녕하세요"+testValue;
}
}
);
app.controller ( 'mytest', function ($ scope, testValue, testservice) {
$ scope.test = "hello"+ testValue;
$ scope.output = testservice.lable ();
});
</스크립트>
<title> Learing argularjs-widuu </title>
</head>
<body ng-app = 'myapp'ng-controller = 'mytest'>
<입력 ng-model = 'test'> {{test}}
</p>
{{산출}}
</body>
</html>
8. 개념
상수는 또한 메소드 상수 (이름, 객체)입니다. 이름은 상수의 이름이고 객체는 상수의 가치입니다. 우리는 이렇게 쓸 수 있습니다.
코드 사본은 다음과 같습니다.
<! doctype html>
<html>
<헤드>
<script src = "angular.min.js"type = "text/javaScript"> </script>
<script type = "text/javaScript">
var app = angular.module ( 'myapp', [])
.Value ( 'testValue', 'widuu')
.constant ( 'count', 23)
.Service ( 'testservice',
함수 (testValue, count) {
this.lable = function () {
"이것은 출력 : hello"+testValue+", 나이는"+count;
}
}
);
app.controller ( 'mytest', function ($ scope, testValue, testservice) {
$ scope.test = "hello"+ testValue;
$ scope.output = testservice.lable ();
});
</스크립트>
<title> Learing argularjs-widuu </title>
</head>
<body ng-app = 'myapp'ng-controller = 'mytest'>
<입력 ng-model = 'test'> {{test}}
</p>
{{산출}}
</body>
</html>
오늘은 모두이며 나중에 계속합니다.