https://github.com/alaeddinejebali/angularjs-examples
List of examples to understand and practice AngularJS
https://github.com/alaeddinejebali/angularjs-examples
angular1 angularjs
Last synced: 9 months ago
JSON representation
List of examples to understand and practice AngularJS
- Host: GitHub
- URL: https://github.com/alaeddinejebali/angularjs-examples
- Owner: alaeddinejebali
- Created: 2015-03-15T16:45:04.000Z (almost 11 years ago)
- Default Branch: master
- Last Pushed: 2017-08-16T10:53:24.000Z (over 8 years ago)
- Last Synced: 2024-10-11T08:41:03.238Z (over 1 year ago)
- Topics: angular1, angularjs
- Language: HTML
- Size: 96.7 KB
- Stars: 3
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Example-01: Using ng-init
Initialize application params using ng-init directive
- Official Documentation of ngInit: https://docs.angularjs.org/api/ng/directive/ngInit
```html
Example 01
{{application.title}}
{{application.description}}
- {{advantage}}
```
# Example-02: Using controller
Initialize application params using a controller
```html
Example 01
{{application.title}}
{{application.description}}
- {{advantage}}
```
```javascript
# Example-02/js/app.js
var app = angular.module('Example_02_App', []);
app.controller('ConfigController', function($scope) {
$scope.application = {
title: 'AngularJS- Example 02',
description: 'AngularJS has many advantages:',
advantages: [
'AngularJS Handles Dependencies',
'AngularJS Allows Developers to Express UI Declaratively and Reduce Side Effects',
'AngularJS Enables Massively Parallel Development',
'AngularJS Enables a Design - Development Workflow',
'AngularJS Gives Developers Controls',
'AngularJS Helps Developers Manage State',
'AngularJS Supports Single Page Applications'
]
};
});
```
# Example 03: Using ng-model
- Official Documentation: https://docs.angularjs.org/api/ng/directive/ngModel
```html
Example 03
Bonjour {{myFriendName}}
Say Hello in French to:
```
# Example 04: Using filters
- Official documentation: https://docs.angularjs.org/api/ng/filter
## Example 04.01: Search items and transform to uppercase
```html
Example 04.01
{{application.title}}
{{application.description}}
- {{advantage.label | uppercase}}
```
```javascript
var app = angular.module('Example_04_01_App', []);
app.controller('ConfigController', function($scope) {
$scope.application = {
title: 'AngularJS- Example 04.01',
description: 'AngularJS has many advantages:',
advantages: [
{id: 1, label: 'AngularJS Handles Dependencies'},
{id: 2, label: 'AngularJS Allows Developers to Express UI Declaratively and Reduce Side Effects'},
{id: 3, label: 'AngularJS Enables Massively Parallel Development'},
{id: 4, label: 'AngularJS Enables a Design - Development Workflow'},
{id: 5, label: 'AngularJS Gives Developers Controls'},
{id: 6, label: 'AngularJS Helps Developers Manage State'},
{id: 7, label: 'AngularJS Supports Single Page Applications'}
]
};
});
```
## Example 04.02: Search items and transform to uppercase and filter by id starting from greater id
```html
Example 04.02
{{application.title}}
{{application.description}}
-
{{advantage.id}}: {{advantage.label | uppercase}}
```
# Using Filters
- Official documentation: https://docs.angularjs.org/api/ng/filter
## Example 1
```html
AnguleJS -Examples
ng-init directive
Filters
All items:
- {{programmingLanguage}}
All items in uppercase
- {{programmingLanguage | uppercase}}
All items which contains 'a'
{{programmingLanguages | filter: 'a'}}
```
## Example 2 (Filter using text field)
```html
AnguleJS -Examples
ng-init directive
- {{filteredItem | lowercase}}
- {{filteredItem | lowercase}}
```
## Example 3 (Sort content [Z-A])
```html
AnguleJS -Examples
- {{filteredItem | lowercase}}
```
## Example 4 (Sort using either by Id or by Content)
```html
AnguleJS -Examples
Sort by Id
Sort by Content
- {{filteredItem | lowercase}}
```
## Example 5 (Sort using either by Id or by Content) and either in ASC or DESC order
```html
AnguleJS -Examples
Sort by Id
Sort by Content
ASC
DESC
- {{filteredItem.content | lowercase}}
```
# Using Scopes
- Byy passing $scope to the function, I tell to AngularJS that I need in my controller a scope. So AngularJS will create a new scope and inject it in the controller.
- Using [ng-controller] [3], you link the view to the controller. So any changes to the data are automatically reflected in the View without the need for a manual update AND when you change the view in the controller you can access it.
```html
AnguleJS -Examples
Sort by Id
Sort by Content
ASC
DESC
- {{filteredItem.content | lowercase}}
function programmingLanguagesController($scope){
$scope.programmingLanguages = [
{id: 1, 'content': 'Java'},
{id: 2, 'content': 'PHP'},
{id: 3, 'content': 'C#'},
{id: 4, 'content': 'Perl'},
{id: 5, 'content': 'ASP'},
{id: 6, 'content': 'Ruby'}
]
}
```
# Thank you!
- Ala Eddine JEBALI
- Edited using http://dillinger.io/
[1]: https://docs.angularjs.org/api/ng/directive/ngApp
[2]: https://docs.angularjs.org/api/ng/directive/ngRepeat
[3]: https://docs.angularjs.org/api/ng/directive/ngController