{"id":14973452,"url":"https://github.com/alaeddinejebali/angularjs-examples","last_synced_at":"2025-04-25T11:33:14.653Z","repository":{"id":28749651,"uuid":"32271644","full_name":"alaeddinejebali/AngularJS-Examples","owner":"alaeddinejebali","description":"List of examples to understand and practice AngularJS","archived":false,"fork":false,"pushed_at":"2017-08-16T10:53:24.000Z","size":99,"stargazers_count":3,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-10-11T08:41:03.238Z","etag":null,"topics":["angular1","angularjs"],"latest_commit_sha":null,"homepage":null,"language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/alaeddinejebali.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-03-15T16:45:04.000Z","updated_at":"2017-08-15T13:34:09.000Z","dependencies_parsed_at":"2022-09-04T22:10:24.217Z","dependency_job_id":null,"html_url":"https://github.com/alaeddinejebali/AngularJS-Examples","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alaeddinejebali%2FAngularJS-Examples","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alaeddinejebali%2FAngularJS-Examples/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alaeddinejebali%2FAngularJS-Examples/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alaeddinejebali%2FAngularJS-Examples/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alaeddinejebali","download_url":"https://codeload.github.com/alaeddinejebali/AngularJS-Examples/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224000793,"owners_count":17238998,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular1","angularjs"],"created_at":"2024-09-24T13:48:47.359Z","updated_at":"2024-11-10T18:49:24.080Z","avatar_url":"https://github.com/alaeddinejebali.png","language":"HTML","readme":"# Example-01: Using ng-init\nInitialize application params using ng-init directive\n- Official Documentation of ngInit: https://docs.angularjs.org/api/ng/directive/ngInit\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003ctitle\u003eExample 01\u003c/title\u003e\n    \u003cscript type=\"text/javascript\" src=\"js/angular.min.js\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n\u003cbody ng-app=\"\" ng-init=\"application = {\n        title: 'AngularJS- Example 01',\n        description: 'AngularJS has many advantages:',\n        advantages: [\n            'AngularJS Handles Dependencies',\n            'AngularJS Allows Developers to Express UI Declaratively and Reduce Side Effects',\n            'AngularJS Enables Massively Parallel Development',\n            'AngularJS Enables a Design - Development Workflow',\n            'AngularJS Gives Developers Controls',\n            'AngularJS Helps Developers Manage State',\n            'AngularJS Supports Single Page Applications'\n        ]\n    }\"\u003e\n    \u003ch1 align=\"center\"\u003e{{application.title}}\u003c/h1\u003e\n    \u003cp\u003e{{application.description}}\u003c/p\u003e\n    \u003col\u003e\n        \u003cli ng-repeat=\"advantage in application.advantages\"\u003e{{advantage}}\u003c/li\u003e\n    \u003c/ol\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n# Example-02: Using controller\nInitialize application params using a controller\n```html\n\u003c!-- Example-02/index.html --\u003e\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\" ng-app=\"Example_02_App\"\u003e\n\u003chead\u003e\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003ctitle\u003eExample 01\u003c/title\u003e\n    \u003cscript src=\"js/angular.min.js\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n\u003cbody ng-controller=\"ConfigController\"\u003e\n    \u003ch1 align=\"center\"\u003e{{application.title}}\u003c/h1\u003e\n    \u003cp\u003e{{application.description}}\u003c/p\u003e\n    \u003col\u003e\n        \u003cli ng-repeat=\"advantage in application.advantages\"\u003e{{advantage}}\u003c/li\u003e\n    \u003c/ol\u003e\n\n    \u003cscript src=\"js/app.js\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n```javascript\n# Example-02/js/app.js\nvar app = angular.module('Example_02_App', []);\napp.controller('ConfigController', function($scope) {\n    $scope.application = {\n        title: 'AngularJS- Example 02',\n        description: 'AngularJS has many advantages:',\n        advantages: [\n            'AngularJS Handles Dependencies',\n            'AngularJS Allows Developers to Express UI Declaratively and Reduce Side Effects',\n            'AngularJS Enables Massively Parallel Development',\n            'AngularJS Enables a Design - Development Workflow',\n            'AngularJS Gives Developers Controls',\n            'AngularJS Helps Developers Manage State',\n            'AngularJS Supports Single Page Applications'\n        ]\n    };\n});\n```\n\n# Example 03: Using ng-model\n- Official Documentation: https://docs.angularjs.org/api/ng/directive/ngModel\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003ctitle\u003eExample 03\u003c/title\u003e\n    \u003cscript type=\"text/javascript\" src=\"js/angular.min.js\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n\u003cbody ng-app=\"\"\u003e\n    \u003ch1 align=\"center\"\u003eBonjour {{myFriendName}}\u003c/h1\u003e\u003chr/\u003e\n    Say Hello in French to: \u003cinput type=\"text\" ng-model=\"myFriendName\" placeholder=\"Friend name...\"\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n# Example 04: Using filters\n- Official documentation: https://docs.angularjs.org/api/ng/filter\n## Example 04.01: Search items and transform to uppercase\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\" ng-app=\"Example_04_01_App\"\u003e\n\u003chead\u003e\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003ctitle\u003eExample 04.01\u003c/title\u003e\n    \u003cscript src=\"js/angular.min.js\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n\u003cbody ng-controller=\"ConfigController\"\u003e\n    \u003ch1 align=\"center\"\u003e{{application.title}}\u003c/h1\u003e\n    \u003cp\u003e{{application.description}}\u003c/p\u003e\n    \u003cul\u003e\n        \u003cli ng-repeat=\"advantage in application.advantages | filter: 'Developers'\"\u003e{{advantage.label | uppercase}}\u003c/li\u003e\n    \u003c/ul\u003e\n\n    \u003cscript src=\"js/app.js\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n```javascript\nvar app = angular.module('Example_04_01_App', []);\napp.controller('ConfigController', function($scope) {\n    $scope.application = {\n        title: 'AngularJS- Example 04.01',\n        description: 'AngularJS has many advantages:',\n        advantages: [\n            {id: 1, label: 'AngularJS Handles Dependencies'},\n            {id: 2, label: 'AngularJS Allows Developers to Express UI Declaratively and Reduce Side Effects'},\n            {id: 3, label: 'AngularJS Enables Massively Parallel Development'},\n            {id: 4, label: 'AngularJS Enables a Design - Development Workflow'},\n            {id: 5, label: 'AngularJS Gives Developers Controls'},\n            {id: 6, label: 'AngularJS Helps Developers Manage State'},\n            {id: 7, label: 'AngularJS Supports Single Page Applications'}\n        ]\n    };\n});\n```\n\n## Example 04.02: Search items and transform to uppercase and filter by id starting from greater id\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\" ng-app=\"Example_04_02_App\"\u003e\n\u003chead\u003e\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003ctitle\u003eExample 04.02\u003c/title\u003e\n    \u003cscript src=\"js/angular.min.js\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n\u003cbody ng-controller=\"ConfigController\"\u003e\n    \u003ch1 align=\"center\"\u003e{{application.title}}\u003c/h1\u003e\n    \u003cp\u003e{{application.description}}\u003c/p\u003e\n    \u003cul\u003e\n        \u003cli ng-repeat=\"advantage in application.advantages | orderBy: id:!reverse\"\u003e\n            {{advantage.id}}: {{advantage.label | uppercase}}\n        \u003c/li\u003e\n    \u003c/ul\u003e\n\n    \u003cscript src=\"js/app.js\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n\n\n\n\n\n\n\n\n\n\n\n\n# Using Filters\n- Official documentation: https://docs.angularjs.org/api/ng/filter\n## Example 1\n```html\n\u003chtml\u003e\n\u003chead\u003e\n\t\u003ctitle\u003eAnguleJS -Examples\u003c/title\u003e\n\u003c/head\u003e\n\u003cbody ng-app\u003e\n\t\u003ch1\u003eng-init directive\u003c/h\u003e\n\t\u003cdiv ng-init=\"programmingLanguages=['Java', 'PHP', 'C#', 'Perl', 'ASP', 'Ruby']\"\u003e\u003c/div\u003e\n\n\t\u003ch1\u003eFilters\u003c/h1\u003e\n\t\u003ch2\u003eAll items:\u003c/h2\u003e\n\t\u003cul\u003e\n\t\t\u003cli ng-repeat=\"programmingLanguage in programmingLanguages\"\u003e{{programmingLanguage}}\u003c/li\u003e\n\t\u003c/ul\u003e\n\n\t\u003ch2\u003eAll items in uppercase\u003c/h2\u003e\n\t\u003cul\u003e\n\t\t\u003cli ng-repeat=\"programmingLanguage in programmingLanguages\"\u003e{{programmingLanguage | uppercase}}\u003c/li\u003e\n\t\u003c/ul\u003e\n\t\t\n\t\u003ch2\u003eAll items which contains 'a'\u003c/h2\u003e\n\t{{programmingLanguages | filter: 'a'}}\n\n\t\u003cscript src=\"https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n## Example 2 (Filter using text field)\n```html\n\u003chtml\u003e\n\u003chead\u003e\n\t\u003ctitle\u003eAnguleJS -Examples\u003c/title\u003e\n\u003c/head\u003e\n\u003cbody ng-app\u003e\n\t\u003ch1\u003eng-init directive\u003c/h\u003e\n\t\u003cdiv ng-init=\"programmingLanguages=['Java', 'PHP', 'C#', 'Perl', 'ASP', 'Ruby']\"\u003e\u003c/div\u003e\n\t\u003cinput type=\"text\" ng-model=\"search\" placeholder=\"Type to filter\" /\u003e\n\t\u003cdiv\u003e\n\t\t\u003cul\u003e\n\t\t\t\u003cli ng-repeat=\"filteredItem in programmingLanguages | filter: search\"\u003e{{filteredItem | lowercase}}\u003c/li\u003e\n\t\t\u003c/ul\u003e\n\t\u003c/div\u003e\n\n\t\u003cscript src=\"https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n## Example 3 (Sort content [Z-A])\n```html\n\u003chtml\u003e\n\u003chead\u003e\n\t\u003ctitle\u003eAnguleJS -Examples\u003c/title\u003e\n\u003c/head\u003e\n\u003cbody ng-app\u003e\n\t\u003cdiv ng-init=\"programmingLanguages=[\n\t\t\t\t\t{id: 1, 'content': 'Java'}, \n\t\t\t\t\t{id: 2, 'content': 'PHP'}, \n\t\t\t\t\t{id: 3, 'content': 'C#'}, \n\t\t\t\t\t{id: 4, 'content': 'Perl'}, \n\t\t\t\t\t{id: 5, 'content': 'ASP'}, \n\t\t\t\t\t{id: 6, 'content': 'Ruby'}\n\t\t\t\t]\"\u003e\u003c/div\u003e\n\t\u003cinput type=\"text\" ng-model=\"search\" placeholder=\"Type to filter\" /\u003e\n\t\u003cdiv\u003e\n\t\t\u003cul\u003e\n\t\t\t\u003cli ng-repeat=\"filteredItem in programmingLanguages | filter: search | orderBy: '-content'\"\u003e{{filteredItem | lowercase}}\u003c/li\u003e\n\t\t\u003c/ul\u003e\n\t\u003c/div\u003e\n\n\t\u003cscript src=\"https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n## Example 4 (Sort using either by Id or by Content)\n```html\n\u003chtml\u003e\n\u003chead\u003e\n\t\u003ctitle\u003eAnguleJS -Examples\u003c/title\u003e\n\u003c/head\u003e\n\u003cbody ng-app\u003e\n\t\u003cdiv ng-init=\"programmingLanguages=[\n\t\t\t\t\t{id: 1, 'content': 'Java'}, \n\t\t\t\t\t{id: 2, 'content': 'PHP'}, \n\t\t\t\t\t{id: 3, 'content': 'C#'}, \n\t\t\t\t\t{id: 4, 'content': 'Perl'}, \n\t\t\t\t\t{id: 5, 'content': 'ASP'}, \n\t\t\t\t\t{id: 6, 'content': 'Ruby'}\n\t\t\t\t]\"\u003e\u003c/div\u003e\n\t\u003cselect ng-model=\"sortingKey\"\u003e\n\t\t\u003coption value=\"id\" selected\u003eSort by Id\u003c/option\u003e\n\t\t\u003coption value=\"content\"\u003eSort by Content\u003c/option\u003e\n\t\u003c/select\u003e\n\t\u003cinput type=\"text\" ng-model=\"search\" placeholder=\"Type to filter\" /\u003e\n\t\u003cdiv\u003e\n\t\t\u003cul\u003e\n\t\t\t\u003cli ng-repeat=\"filteredItem in programmingLanguages | filter: search | orderBy: sortingKey\"\u003e{{filteredItem | lowercase}}\u003c/li\u003e\n\t\t\u003c/ul\u003e\n\t\u003c/div\u003e\n\n\t\u003cscript src=\"https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n## Example 5 (Sort using either by Id or by Content) and either in ASC or DESC order\n```html\n\u003chtml\u003e\n\u003chead\u003e\n\t\u003ctitle\u003eAnguleJS -Examples\u003c/title\u003e\n\u003c/head\u003e\n\u003cbody ng-app\u003e\n\t\u003cdiv ng-init=\"programmingLanguages=[\n\t\t\t\t\t{id: 1, 'content': 'Java'}, \n\t\t\t\t\t{id: 2, 'content': 'PHP'}, \n\t\t\t\t\t{id: 3, 'content': 'C#'}, \n\t\t\t\t\t{id: 4, 'content': 'Perl'}, \n\t\t\t\t\t{id: 5, 'content': 'ASP'}, \n\t\t\t\t\t{id: 6, 'content': 'Ruby'}\n\t\t\t\t]\"\u003e\u003c/div\u003e\n\t\u003cselect ng-model=\"sortingKey\"\u003e\n\t\t\u003coption value=\"id\" selected\u003eSort by Id\u003c/option\u003e\n\t\t\u003coption value=\"content\"\u003eSort by Content\u003c/option\u003e\n\t\u003c/select\u003e\n\t\u003cselect ng-model=\"sortingOrder\"\u003e\n\t\t\u003coption value=\"+\" selected\u003eASC\u003c/option\u003e\n\t\t\u003coption value=\"-\"\u003eDESC\u003c/option\u003e\n\t\u003c/select\u003e\n\t\u003cinput type=\"text\" ng-model=\"search\" placeholder=\"Type to filter\" /\u003e\n\t\u003cdiv\u003e\n\t\t\u003cul\u003e\n\t\t\t\u003cli ng-repeat=\"filteredItem in programmingLanguages | filter: search | orderBy: sortingOrder + sortingKey\"\u003e{{filteredItem.content | lowercase}}\u003c/li\u003e\n\t\t\u003c/ul\u003e\n\t\u003c/div\u003e\n\n\t\u003cscript src=\"https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n# Using Scopes\n- 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.\n- 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.\n```html\n\u003chtml\u003e\n\u003chead\u003e\n\t\u003ctitle\u003eAnguleJS -Examples\u003c/title\u003e\n\u003c/head\u003e\n\u003cbody ng-app\u003e\n\t\u003cdiv ng-controller=\"programmingLanguagesController\"\u003e\u003c/div\u003e\n\t\u003cselect ng-model=\"sortingKey\"\u003e\n\t\t\u003coption value=\"id\" selected\u003eSort by Id\u003c/option\u003e\n\t\t\u003coption value=\"content\"\u003eSort by Content\u003c/option\u003e\n\t\u003c/select\u003e\n\t\u003cselect ng-model=\"sortingOrder\"\u003e\n\t\t\u003coption value=\"+\" selected\u003eASC\u003c/option\u003e\n\t\t\u003coption value=\"-\"\u003eDESC\u003c/option\u003e\n\t\u003c/select\u003e\n\t\u003cinput type=\"text\" ng-model=\"search\" placeholder=\"Type to filter\" /\u003e\n\t\u003cdiv\u003e\n\t\t\u003cul\u003e\n\t\t\t\u003cli ng-repeat=\"filteredItem in programmingLanguages | filter: search | orderBy: sortingOrder + sortingKey\"\u003e{{filteredItem.content | lowercase}}\u003c/li\u003e\n\t\t\u003c/ul\u003e\n\t\u003c/div\u003e\n\n\t\u003cscript src=\"https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js\"\u003e\u003c/script\u003e\n\t\u003cscript type=\"text/javascript\"\u003e\n\t\tfunction programmingLanguagesController($scope){\n\t\t\t$scope.programmingLanguages = [\n\t\t\t\t\t{id: 1, 'content': 'Java'}, \n\t\t\t\t\t{id: 2, 'content': 'PHP'}, \n\t\t\t\t\t{id: 3, 'content': 'C#'}, \n\t\t\t\t\t{id: 4, 'content': 'Perl'}, \n\t\t\t\t\t{id: 5, 'content': 'ASP'}, \n\t\t\t\t\t{id: 6, 'content': 'Ruby'}\n\t\t\t\t]\n\t\t}\n\t\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n\n# Thank you!\n- Ala Eddine JEBALI\n- Edited using http://dillinger.io/\n\n\n[1]: https://docs.angularjs.org/api/ng/directive/ngApp\n[2]: https://docs.angularjs.org/api/ng/directive/ngRepeat\n[3]: https://docs.angularjs.org/api/ng/directive/ngController\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falaeddinejebali%2Fangularjs-examples","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falaeddinejebali%2Fangularjs-examples","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falaeddinejebali%2Fangularjs-examples/lists"}