This app is to help me understand Angular 1 better. I am following Egghead.io's intro tutorial.
I am not following the tutorial exactly. I'm instead trying to implement John Papa's style guide to get me used to that.
This app lets you add, edit, and delete Internet bookmarks.
npm npm serve
First time: npm install
Then: http-server
- Create HTML template
- Add Angular, jQuery, bootstrap dependencies
- Add ng-app to
<html>opening tag to initialize Angular - Create Angular app in app.js:
angular.module('eggly',[]) - Create a main controller in main-controller.js:
angular.module('eggly').controller('MainCtrl', MainCtrl);function MainCtrl() {var mainVm = this;mainVm.someVariable = null;mainVm.someFunction = someFunction;function someFunction() { ... }} - Add your data, e.g., JSON for categories and bookmarks, in the controller.
- Register your controller with an element in the view:
<body ng-controller="MainCtrl as mainVm">. - In a child element, use
ng-repeatand handlebars{{ }}<div><ul><li ng-repeat="bookmark in mainVm.bookmarks">{{ bookmark.title }}</li></ul></div> - Create functions and variables to filter display of bookmarks by current selected category.
- Create functions and variables for CRUD operations on bookmarks.
- Create functions and variables to make display nicer, e.g., highlight active category or active bookmark.
- Create a file structure based on feature .
- Create module
angular.module('categories',[])and submoduleangular.module('categories.bookmarks', [])in their feature folders->JS files. - Create submodules for
createandeditbookmarks. - Inject those submodules into the
categories.bookmarkssubmodule:angular.module('categories.bookmarks', ['categories.bookmarks.create', 'categories.bookmarks.edit']) - Create a common folder for things used across modules, e.g., models. Here we'll have bookmarks and categories models.
- Inject them in their appropriate features modules:
angular.module('categories', ['eggly.models.categories']);andangular.module('categories.bookmarks', [ 'eggly.models.categories', 'eggly.models.bookmarks', 'categories.bookmarks.create', 'categories.bookmarks.edit' ]); - Inject the bookmarks and categories modules into the main app module.
angular.module("eggly", ['categories', 'categories.bookmarks']); - Add ui-router for state URL and state parameters. State parameters help pass information between modules.
- Use ui-sref directive in view
<a></a>tags so users can toggle between state URLs. In bookmarks controller:function bookmarkConfig($stateProvider) { $stateProvider.state('eggly.categories.bookmarks', { url: 'categories/:category', views: { 'bookmarks@': { templateUrl: 'webapp/categories/bookmarks/bookmarks.tmpl.html', controller: 'BookmarksCtrl as bmVm' } } }); }In categories view:<a ui-sref="eggly.categories.bookmarks({category:category.name})" ng-click="mainVm.setCurrentCategory(category)">{{ category.name }}</a> - Create separate service classes to simplify controllers.
- Externalize inline data and call them with $http.get service.
- Use $q service which handles promises (what $http.get returns) for caching and other data manipulation before sending data to controllers.