Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (12)
Similar to Introduction to AngularJS
Similar to Introduction to AngularJS (20)
Recently uploaded
Recently uploaded (20)
Introduction to AngularJS
- 1. UP AND RUNNING WITH FRONT END WEB DEVELOPMENT ANGULARJS
- 2. Requirements oAngularJS has no dependencies on any other libraries or framework. oAdd `ng-app` attribute in your HTML (angular directive, ng is a short of angular) oChrome DevTools
- 3. Angular Architecture oTwo Way Data Binding oDirty Checking oDependency Injection (remember)
- 4. Controllers oControl the information that we put/edit on the page. oTo bring controllers to life. oDirective called ng-controller. oHow does angular knows where does that controller live? oCreating a function that angular will invoke. oAlways pass the parameter to a controller name $scope which will hold the info. o$scope is not the model but info we attached to the model
- 5. Controllers Capabilities oAngular passes the controller function and it manipulate the $scope oNotice how the controller never has to communicate with the html. View Controller Model
- 6. Controllers Capabilities con. oThis will create a great separation between the model and the view. ojQuery is different. oOn larger applications you might need multiple controllers oDealing with complex objects oNested controllers.
- 7. $http Service oJust an Object that contains methods that I can use. oEncapsulate HTTP communication (GET, POST, PUT, and DELETE). oI can use $http inside a controller by asking for it (DI) just by adding another parameter to the controller function. oUsing methods like .get, .post OR Using an object inside $http. oBut wait, as it’s asynchronies call, thus it returns a promise (to make sure, use .then on that). oBEWARE! oExample: using $http service (GitHub API).
- 8. Modules oBuilding a controller in the global namespace is really bad approach (remember!). oAngular 1.3 and above prevent this by default. oJust use module please. oModule pattern, revealing module pattern, and angular module. ( _ ) Mother of modules.⌐■ ■ oThey are different, but they have the same goal, which is to provide a container. oController usually live in modules (avoiding global namespace). oWhen do I need a module, when do I use a consisting module? oCreate a module with a name as first parameter, and array of dependencies of that module. oRegister your controller in the module (use .controller) oTell Angular to use your module with `ng-app`.
- 9. Directives and Views oBinding directives, model directives, event directives, and display directives. o`ng-app` and `ng-controller` are directives. oDirectives to handle a button click for example. oReminder: Model doesn’t touch the HTML directly. oUse a binding directive to attach the data to the html (meet `ng-bind`). oThis called Data Binding Directive. oData binding moves model data to the view. o`ng-src` and `ng-href`.
- 10. Directives and Views con. oSeparation in concern. oThe controller and the model focus on the data, while the view only shows those data. oBut if I want to send information from the user view? oDirectives allow that also (indirect model view interaction). We have directives that move data from the view to the model also. o`ng-model`. o`ng-click` and `ng-submit`.
- 11. Filters oBasic format: expression | filterName:parameter o`ng-repeat` to loop. oSome useful filters: currency, date, filter, limitTo, lowercase, uppercase, number, orderBy, and json (for debugging).
- 12. More Directives o`ng-show` and `ng-hide` (boolean). o`ng-include` to include HTML partials. o`ng-class`, `ng-disable`, `ng-focus`, and `ng-style` (same as they indicate). o`ng-mouseleave`, `ng-mousemove`, `ng-mouseenter`, and `ng-dblclick` (mouse events). o`ng-keypress`, `ng-keyup` (keyboard/keypad events).
- 13. IE Custom Tag Restrictions oლ(ಠ 益 ಠლ) Y U NO SUPPORT IT? o4 ways to “directive” (not applied for all directives though. More info on AngularJS website). oTag name: <ng-*></ng-*> oAttribute name: <div ng-*=“…”>…</div>, <div ng:*=“…”>…</div>, <div ng_*=“…”>…</div>, <div data-ng-*=“…”>…</div>, <div x-ng-*=“…”>…</div> oUse the data-* for HTML validation. oClass name: <div class=“ng-*”></div> oHTML Comments. oPrefer using directives via tag name and attributes over comment and class names.
- 14. Services oAngular comes with a lot of services and ability to build your own. oServices like: sending http requests, computing a hash of a string, saving data into local storage, manage cookies sent from the server, performing a validation checks… etc. oController and directives use services. oBuilt-in services like: $http, $interval, $window, $browser, $anchorScroll, $location, $log, $timeout, $animate… etc. oNotice that everything relate to angular (built-in functionality) starts with `$`, like the services above. o$log service can be reprogrammed to send information to the server, which will make it easier to track the problem that the user is having.
- 15. Services con. oThere are UI related services. oWhen you want to force the user to navigate to a new URL. oPop –up a model dialog to force the user to type data before taking any action. oBEWARE! oThe solution to these scenarios is still not to touch UI related objects directly from the model, but instead using services that can wrap this functionality. o$location and $anchorScroll oWhy building your own service? Create reusable logic, create shared data, manage complexity.
- 16. Routing oNavigate between views. oPass parameters between views. oUse backward and forward (the history of the browser is synchronized with the user) oWhy? Not putting all the functionality in one view and one controller. oRouting based on URL. oRouting engine captures request. oRouting rules render a response. oHow does the routing work with angular?
- 17. Routing con. oYou have to include another module `ngRoute` (in angular-route.js) oConfigure rules into $routeProvider (.config). oUsing .when and .otherwise to assign the URL and the controller for each view. oSetup a layout view. o`ng-view` for all.
- 18. References oAngularJS (https://angularjs.org/) oData Binding – AngularJs (https://docs.angularjs.org/guide/databinding) oControllers – AngularJS (https://docs.angularjs.org/guide/controller) o$http – AngularJS (https://docs.angularjs.org/api/ng/service/$http) oModules – AngularJS (https://docs.angularjs.org/guide/module) oDirectives – AngularJS (https://docs.angularjs.org/api/ng/directive) oFilters – AngularJS (https://docs.angularjs.org/guide/filter) oServices – AngularJS (https://docs.angularjs.org/guide/services) ongRoute – AngularJS (https://docs.angularjs.org/api/ngRoute)
Editor's Notes
- **Simple Example** &lt;body ng-app&gt; {{1+2}} &lt;/body&gt; =&gt; &lt;div ng-app&gt;&lt;/div&gt;
- **Main View** &lt;div ng-controller=&quot;MainController&quot;&gt; {{message}} &lt;/div&gt; **Controller** var MainController = function($scope) { $scope.message = &apos;Hello World!&apos;; }
- **Controller** var MainController = function($scope) { var person = { fname: &apos;Anas&apos;, lname: &apos;Shekhamis&apos;, img: &apos;https://pbs.twimg.com/profile_images/461250252507328512/a8L2fwnk.png&apos; } $scope.person = person; $scope.message = &apos;Hello World!&apos;; } **View** &lt;div ng-controller=&quot;MainController&quot;&gt; {{message}} Name is: {{person.fname}} {{person.lname}} &lt;br&gt; &lt;img ng-src=&quot;{{person.img}}&quot; alt=&quot;{{person.fname}} {{person.lname}}&quot; title=&quot;{{person.fname}} {{person.lname}}&quot; /&gt; &lt;/div&gt;
- **Controller** var MainController = function($scope, $http) { var onUserComplete = function (response) { $scope.user = response.data; }, onError = function(reason) { $scope.error = &quot;Could not fetch the user!&quot;; } $http.get(&quot;https://api.github.com/users/angular&quot;) .then(onUserComplete, onError); } **View** &lt;div ng-controller=&quot;MainController&quot;&gt; &lt;p&gt; {{error}} &lt;/p&gt; Name: {{user.name}} &lt;br&gt; Link on GitHub: &lt;a ng-href=&quot;{{user.html_url}}&quot;&gt;{{user.name}}&lt;/a&gt;&lt;br&gt; &lt;img ng-src=&quot;{{user.avatar_url}}&quot; title=&quot;{{user.name}}&quot; /&gt; &lt;/div&gt;
- **Module** var github = angular.module(‘githubAPI&apos;, []); **Controller** var MainController = function($scope, $http) { var onUserComplete = function (response) { $scope.user = response.data; }, onError = function(reason) { $scope.error = &quot;Could not fetch the user!&quot;; } $http.get(&quot;https://api.github.com/users/angular&quot;) .then(onUserComplete, onError); } **Assigning the controller** github.controller(&apos;MainController&apos;, MainController); **View** &lt;div ng-app=“githubAPI&quot;&gt; &lt;div ng-controller=&quot;MainController&quot;&gt; &lt;p&gt; {{error}} &lt;/p&gt; Name: {{user.name}} &lt;br&gt; Link on GitHub: &lt;a ng-href=&quot;{{user.html_url}}&quot;&gt;{{user.name}}&lt;/a&gt;&lt;br&gt; &lt;img ng-src=&quot;{{user.avatar_url}}&quot; title=&quot;{{user.name}}&quot; /&gt; &lt;/div&gt; &lt;/div&gt;
- **View (example 1)** &lt;div ng-controller=&quot;MainController&quot;&gt; &lt;p&gt; {{error}} &lt;/p&gt; &lt;form name=&quot;searchUser&quot;&gt; Search User:&lt;input type=&quot;search&quot; ng-model=&quot;username&quot; placeholder=&quot;Username to find!&quot; /&gt; &lt;span&gt;{{username}}&lt;/span&gt;&lt;br&gt; &lt;button type=&quot;submit&quot;&gt;search&lt;/button&gt; &lt;/form&gt; Name: {{user.name}} &lt;br&gt; Link on GitHub: &lt;a ng-href=&quot;{{user.html_url}}&quot;&gt;{{user.name}}&lt;/a&gt;&lt;br&gt; &lt;img ng-src=&quot;{{user.avatar_url}}&quot; title=&quot;{{user.name}}&quot; /&gt; &lt;/div&gt; **View (example 2)** &lt;div ng-controller=&quot;MainController&quot;&gt; &lt;p&gt; {{error}} &lt;/p&gt; &lt;form name=&quot;searchUser&quot;&gt; Search User:&lt;input type=&quot;search&quot; ng-model=&quot;username&quot; placeholder=&quot;Username to find!&quot; /&gt; &lt;span&gt;{{username}}&lt;/span&gt;&lt;br&gt; &lt;button type=&quot;submit&quot; ng-click=&quot;search(username)&quot;&gt;search&lt;/button&gt; &lt;/form&gt; Name: {{user.name}} &lt;br&gt; Link on GitHub: &lt;a ng-href=&quot;{{user.html_url}}&quot;&gt;{{user.name}}&lt;/a&gt;&lt;br&gt; &lt;img ng-src=&quot;{{user.avatar_url}}&quot; title=&quot;{{user.name}}&quot; /&gt; &lt;/div&gt; **View (example 3)** &lt;div ng-controller=&quot;MainController&quot;&gt; &lt;p&gt; {{error}} &lt;/p&gt; &lt;form name=&quot;searchUser&quot; ng-submit=&quot;search(username)&quot;&gt; Search User:&lt;input type=&quot;search&quot; ng-model=&quot;username&quot; placeholder=&quot;Username to find!&quot; required /&gt; &lt;span&gt;{{username}}&lt;/span&gt;&lt;br&gt; &lt;button type=&quot;submit&quot;&gt;search&lt;/button&gt; &lt;/form&gt; Name: {{user.name}} &lt;br&gt; Link on GitHub: &lt;a ng-href=&quot;{{user.html_url}}&quot;&gt;{{user.name}}&lt;/a&gt;&lt;br&gt; &lt;img ng-src=&quot;{{user.avatar_url}}&quot; title=&quot;{{user.name}}&quot; /&gt; &lt;/div&gt;
- **Controller** var MainController = function($scope, $http) { var onUserComplete = function (response) { $scope.user = response.data; $http.get($scope.user.repos_url) .then(onRepos, onError); }, onError = function(reason) { $scope.error = &quot;Could not fetch the data!&quot;; }, onRepos = function(response) { $scope.repos = response.data; }; $scope.username = &apos;angular&apos;; $scope.reposSort = &quot;-stargazers_count&quot;; $scope.search = function(username) { $http.get(&quot;https://api.github.com/users/&quot; + username) .then(onUserComplete, onError); } } **View** &lt;div ng-controller=&quot;MainController&quot;&gt; &lt;p&gt; {{error}} &lt;/p&gt; &lt;form name=&quot;searchUser&quot; ng-submit=&quot;search(username)&quot;&gt; Search User:&lt;input type=&quot;search&quot; ng-model=&quot;username&quot; placeholder=&quot;Username to find!&quot; required /&gt; &lt;span&gt;{{username}}&lt;/span&gt;&lt;br&gt; &lt;button type=&quot;submit&quot;&gt;search&lt;/button&gt; &lt;/form&gt; &lt;h1&gt;&lt;a ng-href=&quot;{{user.html_url}}&quot;&gt;{{user.name}}&lt;/a&gt; (created at: {{user.created_at | date:&apos;short&apos;}})&lt;/h1&gt; &lt;img ng-src=&quot;{{user.avatar_url}}&quot; title=&quot;{{user.name}}&quot; /&gt; &lt;br&gt; &lt;h3&gt;Repos&lt;/h3&gt; &lt;input type=&quot;search&quot; placeholder=&quot;search by repo name&quot; ng-model=&quot;searchTerm&quot; /&gt; Order: &lt;select ng-model=&quot;reposSort&quot;&gt; &lt;option value=&quot;+name&quot;&gt;Name&lt;/option&gt; &lt;option value=&quot;-stargazers_count&quot;&gt;Stars&lt;/option&gt; &lt;option value=&quot;+language&quot;&gt;Language&lt;/option&gt; &lt;/select&gt; &lt;table&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;Name&lt;/th&gt; &lt;th&gt;Stars&lt;/th&gt; &lt;th&gt;Language&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr ng-repeat=&quot;repo in repos | filter:searchTerm | orderBy:reposSort&quot;&gt; &lt;td&gt;{{repo.name | uppercase}}&lt;/td&gt; &lt;td&gt;{{repo.stargazers_count | number}}&lt;/td&gt; &lt;td&gt;{{repo.language}}&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;/div&gt;
- **View** &lt;div ng-controller=&quot;MainController&quot;&gt; &lt;p&gt; {{error}} &lt;/p&gt; &lt;form name=&quot;searchUser&quot; ng-submit=&quot;search(username)&quot;&gt; Search User: &lt;input type=&quot;search&quot; ng-model=&quot;username&quot; placeholder=&quot;Username to find!&quot; required /&gt; &lt;span&gt;{{username}}&lt;/span&gt; &lt;br&gt; &lt;button type=&quot;submit&quot;&gt;search&lt;/button&gt; &lt;/form&gt; &lt;div ng-show=&quot;user&quot;&gt; &lt;h1&gt;&lt;a ng-href=&quot;{{user.html_url}}&quot;&gt;{{user.name}}&lt;/a&gt; (created at: {{user.created_at | date:&apos;short&apos;}})&lt;/h1&gt; &lt;img ng-src=&quot;{{user.avatar_url}}&quot; title=&quot;{{user.name}}&quot; /&gt; &lt;br&gt; &lt;h3&gt;Repos&lt;/h3&gt; &lt;input type=&quot;search&quot; placeholder=&quot;search by repo name&quot; ng-model=&quot;searchTerm&quot; /&gt; Order: &lt;select ng-model=&quot;reposSort&quot;&gt; &lt;option value=&quot;+name&quot;&gt;Name&lt;/option&gt; &lt;option value=&quot;-stargazers_count&quot;&gt;Stars&lt;/option&gt; &lt;option value=&quot;+language&quot;&gt;Language&lt;/option&gt; &lt;/select&gt; &lt;table ng-show=&quot;repos&quot;&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;Name&lt;/th&gt; &lt;th&gt;Stars&lt;/th&gt; &lt;th&gt;Language&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr ng-repeat=&quot;repo in repos | filter:searchTerm | orderBy:reposSort&quot;&gt; &lt;td&gt;{{repo.name | uppercase}}&lt;/td&gt; &lt;td&gt;{{repo.stargazers_count | number}}&lt;/td&gt; &lt;td&gt;{{repo.language}}&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;/div&gt; &lt;/div&gt; -------------------------------------------------------------- **Main View** &lt;div ng-controller=&quot;MainController&quot;&gt; &lt;p&gt; {{error}} &lt;/p&gt; &lt;form name=&quot;searchUser&quot; ng-submit=&quot;search(username)&quot;&gt; Search User: &lt;input type=&quot;search&quot; ng-model=&quot;username&quot; placeholder=&quot;Username to find!&quot; required /&gt; &lt;span&gt;{{username}}&lt;/span&gt; &lt;br&gt; &lt;button type=&quot;submit&quot;&gt;search&lt;/button&gt; &lt;/form&gt; &lt;div ng-include=&quot;&apos;userdetails.html&apos;&quot; ng-show=&quot;user&quot;&gt;&lt;/div&gt; &lt;/div&gt; **Partial View (to be included)** &lt;h1&gt;&lt;a ng-href=&quot;{{user.html_url}}&quot;&gt;{{user.name}}&lt;/a&gt; (created at: {{user.created_at | date:&apos;short&apos;}})&lt;/h1&gt; &lt;img ng-src=&quot;{{user.avatar_url}}&quot; title=&quot;{{user.name}}&quot; /&gt; &lt;br&gt; &lt;h3&gt;Repos&lt;/h3&gt; &lt;input type=&quot;search&quot; placeholder=&quot;search by repo name&quot; ng-model=&quot;searchTerm&quot; /&gt; Order: &lt;select ng-model=&quot;reposSort&quot;&gt; &lt;option value=&quot;+name&quot;&gt;Name&lt;/option&gt; &lt;option value=&quot;-stargazers_count&quot;&gt;Stars&lt;/option&gt; &lt;option value=&quot;+language&quot;&gt;Language&lt;/option&gt; &lt;/select&gt; &lt;table ng-show=&quot;repos&quot;&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;Name&lt;/th&gt; &lt;th&gt;Stars&lt;/th&gt; &lt;th&gt;Language&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr ng-repeat=&quot;repo in repos | filter:searchTerm | orderBy:reposSort&quot;&gt; &lt;td&gt;{{repo.name | uppercase}}&lt;/td&gt; &lt;td&gt;{{repo.stargazers_count | number}}&lt;/td&gt; &lt;td&gt;{{repo.language}}&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt;
- **Controller** var MainController = function ($scope, $http, $interval, $log) { var onUserComplete = function (response) { $scope.user = response.data; $http.get($scope.user.repos_url) .then(onRepos, onError); }, onError = function (reason) { $scope.error = &quot;Could not fetch the data!&quot;; }, onRepos = function (response) { $scope.repos = response.data; }, decrementCountdown = function () { $scope.countdown--; if ($scope.countdown &lt; 1) { $scope.search($scope.username); } }, countdownInterval = null, startCountdown = function () { countdownInterval = $interval(decrementCountdown, 1000, $scope.countdown); }; $scope.search = function (username) { $log.info(&apos;Searching for &apos;+username); $http.get(&quot;https://api.github.com/users/&quot; + username) .then(onUserComplete, onError); if(countdownInterval) { $interval.cancel(countdownInterval); $scope.countdown = null; } } $scope.username = &apos;angular&apos;; $scope.reposSort = &quot;-stargazers_count&quot;; $scope.countdown = 5; startCountdown(); } **Main View** &lt;div ng-controller=&quot;MainController&quot;&gt; &lt;p&gt; {{error}} &lt;/p&gt; &lt;br&gt; {{countdown}} &lt;form name=&quot;searchUser&quot; ng-submit=&quot;search(username)&quot;&gt; Search User: &lt;input type=&quot;search&quot; ng-model=&quot;username&quot; placeholder=&quot;Username to find!&quot; required /&gt; &lt;span&gt;{{username}}&lt;/span&gt; &lt;br&gt; &lt;button type=&quot;submit&quot;&gt;search&lt;/button&gt; &lt;/form&gt; &lt;div ng-include=&quot;&apos;userdetails.html&apos;&quot; ng-show=&quot;user&quot;&gt;&lt;/div&gt; &lt;/div&gt;
- **Controller** var MainController = function ($scope, $http, $interval, $log, $anchorScroll, $location) { var onUserComplete = function (response) { $scope.user = response.data; $http.get($scope.user.repos_url) .then(onRepos, onError); }, onError = function (reason) { $scope.error = &quot;Could not fetch the data!&quot;; }, onRepos = function (response) { $scope.repos = response.data; $location.hash(&apos;userDetails&apos;); $anchorScroll(); }, decrementCountdown = function () { $scope.countdown--; if ($scope.countdown &lt; 1) { $scope.search($scope.username); } }, countdownInterval = null, startCountdown = function () { countdownInterval = $interval(decrementCountdown, 1000, $scope.countdown); }; $scope.search = function (username) { $log.info(&apos;Searching for &apos;+username); $http.get(&quot;https://api.github.com/users/&quot; + username) .then(onUserComplete, onError); if(countdownInterval) { $interval.cancel(countdownInterval); $scope.countdown = null; } } $scope.username = &apos;angular&apos;; $scope.reposSort = &quot;-stargazers_count&quot;; $scope.countdown = 5; startCountdown(); } **Partial View** &lt;div id=&quot;userDetails&quot;&gt; &lt;h1&gt;&lt;a ng-href=&quot;{{user.html_url}}&quot;&gt;{{user.name}}&lt;/a&gt; (created at: {{user.created_at | date:&apos;short&apos;}})&lt;/h1&gt; &lt;img ng-src=&quot;{{user.avatar_url}}&quot; title=&quot;{{user.name}}&quot; /&gt; &lt;br&gt; &lt;h3&gt;Repos&lt;/h3&gt; &lt;input type=&quot;search&quot; placeholder=&quot;search by repo name&quot; ng-model=&quot;searchTerm&quot; /&gt; Order: &lt;select ng-model=&quot;reposSort&quot;&gt; &lt;option value=&quot;+name&quot;&gt;Name&lt;/option&gt; &lt;option value=&quot;-stargazers_count&quot;&gt;Stars&lt;/option&gt; &lt;option value=&quot;+language&quot;&gt;Language&lt;/option&gt; &lt;/select&gt; &lt;/div&gt; &lt;table ng-show=&quot;repos&quot;&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;Name&lt;/th&gt; &lt;th&gt;Stars&lt;/th&gt; &lt;th&gt;Language&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr ng-repeat=&quot;repo in repos | filter:searchTerm | orderBy:reposSort&quot;&gt; &lt;td&gt;{{repo.name | uppercase}}&lt;/td&gt; &lt;td&gt;{{repo.stargazers_count | number}}&lt;/td&gt; &lt;td&gt;{{repo.language}}&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; ----------Creating Services-------------------------------- **Conroller** var MainController = function ($scope, github, $interval, $log, $anchorScroll, $location) { var onUserComplete = function (data) { $scope.user = data; github.getRepos($scope.user).then(onRepos, onError); }, onError = function (reason) { $scope.error = &quot;Could not fetch the data!&quot;; }, onRepos = function (data) { $scope.repos = data; $location.hash(&apos;userDetails&apos;); $anchorScroll(); }, decrementCountdown = function () { $scope.countdown--; if ($scope.countdown &lt; 1) { $scope.search($scope.username); } }, countdownInterval = null, startCountdown = function () { countdownInterval = $interval(decrementCountdown, 1000, $scope.countdown); }; $scope.search = function (username) { $log.info(&apos;Searching for &apos;+username); github.getUser(username).then(onUserComplete, onError); if(countdownInterval) { $interval.cancel(countdownInterval); $scope.countdown = null; } } $scope.username = &apos;angular&apos;; $scope.reposSort = &quot;-stargazers_count&quot;; $scope.countdown = 5; startCountdown(); } **Main View** &lt;div ng-controller=&quot;MainController&quot;&gt; &lt;p&gt; {{error}} &lt;/p&gt; &lt;br&gt; {{countdown}} &lt;form name=&quot;searchUser&quot; ng-submit=&quot;search(username)&quot;&gt; Search User: &lt;input type=&quot;search&quot; ng-model=&quot;username&quot; placeholder=&quot;Username to find!&quot; required /&gt; &lt;span&gt;{{username}}&lt;/span&gt; &lt;br&gt; &lt;button type=&quot;submit&quot;&gt;search&lt;/button&gt; &lt;/form&gt; &lt;div ng-include=&quot;&apos;userdetails.html&apos;&quot; ng-show=&quot;user&quot;&gt;&lt;/div&gt; &lt;/div&gt; **Services** (function () { var github = function ($http) { var getUser = function (username) { return $http.get(&quot;https://api.github.com/users/&quot; + username) .then(function (response) { return response.data; }); }, getRepos = function (user) { return $http.get(user.repos_url) .then(function (response) { return response.data; }); }; return { getUser: getUser, getRepos: getRepos }; } var module = angular.module(&apos;githubAPI&apos;); module.factory(&apos;github&apos;, github); }());
- **The final code** **Module and routeProvider Config** (function () { var githubAPI = angular.module(&apos;githubAPI&apos;, [&apos;ngRoute&apos;]); githubViewer.config(function ($routeProvider) { $routeProvider .when(&apos;/main&apos;, { templateUrl: &quot;main.html&quot;, controller: &apos;MainController&apos; }) .when(&apos;/user/:username&apos;, { templateUrl: &quot;user.html&quot;, controller: &apos;UserController&apos; }) .otherwise({ redirectTo: &apos;/main&apos; }) }); }()); **First Controller** var MainController = function ($scope, $interval, $location) { var decrementCountdown = function () { $scope.countdown--; if ($scope.countdown &lt; 1) { $scope.search($scope.username); } }, countdownInterval = null, startCountdown = function () { countdownInterval = $interval(decrementCountdown, 1000, $scope.countdown); }; $scope.search = function (username) { if(countdownInterval) { $interval.cancel(countdownInterval); $scope.countdown = null; } $location.path(&apos;/user/&apos;+username); } $scope.username = &apos;angular&apos;; $scope.countdown = 5; startCountdown(); } **Second Controller** var UserController = function ($scope, github, $routeParams) { var onUserComplete = function (data) { $scope.user = data; github.getRepos($scope.user).then(onRepos, onError); }, onError = function (reason) { $scope.error = &quot;Could not fetch the data!&quot;; }, onRepos = function (data) { $scope.repos = data; }; $scope.username = $routeParams.username; $scope.reposSort = &quot;-stargazers_count&quot;; github.getUser($scope.username).then(onUserComplete, onError); } **Main View** &lt;div ng-view&gt;&lt;/div&gt; **First Partial View** &lt;div&gt; &lt;br&gt; {{countdown}} &lt;form name=&quot;searchUser&quot; ng-submit=&quot;search(username)&quot;&gt; Search User: &lt;input type=&quot;search&quot; ng-model=&quot;username&quot; placeholder=&quot;Username to find!&quot; required /&gt; &lt;span&gt;{{username}}&lt;/span&gt; &lt;br&gt; &lt;button type=&quot;submit&quot;&gt;search&lt;/button&gt; &lt;/form&gt; &lt;/div&gt; **Second Partial View** &lt;div&gt; {{error}} &lt;h1&gt;&lt;a ng-href=&quot;{{user.html_url}}&quot;&gt;{{user.name}}&lt;/a&gt; (created at: {{user.created_at | date:&apos;short&apos;}})&lt;/h1&gt; &lt;img ng-src=&quot;{{user.avatar_url}}&quot; title=&quot;{{user.name}}&quot; /&gt; &lt;br&gt; &lt;h3&gt;Repos&lt;/h3&gt; &lt;input type=&quot;search&quot; placeholder=&quot;search by repo name&quot; ng-model=&quot;searchTerm&quot; /&gt; Order: &lt;select ng-model=&quot;reposSort&quot;&gt; &lt;option value=&quot;+name&quot;&gt;Name&lt;/option&gt; &lt;option value=&quot;-stargazers_count&quot;&gt;Stars&lt;/option&gt; &lt;option value=&quot;+language&quot;&gt;Language&lt;/option&gt; &lt;/select&gt; &lt;/div&gt; &lt;table ng-show=&quot;repos&quot;&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;Name&lt;/th&gt; &lt;th&gt;Stars&lt;/th&gt; &lt;th&gt;Language&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr ng-repeat=&quot;repo in repos | filter:searchTerm | orderBy:reposSort&quot;&gt; &lt;td&gt;{{repo.name | uppercase}}&lt;/td&gt; &lt;td&gt;{{repo.stargazers_count | number}}&lt;/td&gt; &lt;td&gt;{{repo.language}}&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;br&gt; &lt;a href=&quot;#/main&quot;&gt;Back To Search!&lt;/a&gt; **Services** (function () { var github = function ($http) { var getUser = function (username) { return $http.get(&quot;https://api.github.com/users/&quot; + username) .then(function (response) { return response.data; }); }, getRepos = function (user) { return $http.get(user.repos_url) .then(function (response) { return response.data; }); }; return { getUser: getUser, getRepos: getRepos }; } var module = angular.module(&apos;githubAPI&apos;); module.factory(&apos;github&apos;, github); }());