Angular

In this unit you will be building a full MVC-style frontend web application to display the content of your API. You will be using AngularJS, a frontend framework maintained by Google, and still the most popular framework for building web applications today.

1. Understand how views, controllers and models interact in Angular.
2. Use factories to maintain data consistency across your application.
3. Create a rich, dynamic messaging platform.
4. Use your own API to reinforce the value of API design.
5. Successfully make HTTP requests in Angular.

Developing modern front-end web applications requires us to manage complex patterns of data on the front-end. The data (for example, the number of favorites on a tweet, whether a button has been selected or not) constantly change as new information becomes available from the server or as users interact with the data. Frameworks give us the structure to more easily design applications that handle this complexity.

Angular is the currently the most popular front-end JavaScript framework using the Model-View-Controller pattern. Coding Horror - Understanding MVC

Angular uses two-way data binding to ensure that any data-related changes affecting the underlying data model immediately update the relevant view or views (the UI that the user interacts with). Any changes to the view (for example by a user) immediately updates the relevant data model.

'Controllers' AngularJS Controller Tutorial join the dots between the 'data' in the view (that the user interacts with) and data in the underlying 'model'

We must write the models, views and controllers (Angular docs - Controllers) ourselves as developers - Angular gives us plenty of tools to do so as well as a structure it expects us to follow.

• Angular documentation can be obscure, so ensure you balance interpreting the documentation with reading posts & tutorials by other developers - Use AngularJS to Power Your Web Application
• Forget about React's clear and helpful error messages - Angular's errors are a different beast. If you feel like your error message is unreadable, notice that each error message has a URL link at the top. Clicking the link takes you to a more detailed error page which is usually much more helpful than the message shown in console.

• Run npm install to install server-side dependencies
• Run bower install to install browser-side dependencies
• Run npm start to start your server. Open your browser to the following address:

http://localhost:3000

• You can run the tests either by opening test/test.html in the browser or running this command in the terminal.

npm test

• Additionally, be sure to run the app in your browser and use it to verify its functionality.

npm start
open http://localhost:3000/

• Modify the HomeController scope have a name property. Set the name property to your name.
• Modify the home.html partial to display the value set to the name property.

• Create another route at /about that displays the about.html partial.
• Create another module named Codesmith.AboutController (place inside ./client/controllers/aboutController.js and be sure to include this new file on the page via a <script> tag).
• Create a controller named AboutController inside the Codesmith.AboutController module
• Add this module to you app's dependencies in myApp.
• Modify the about.html partial to display the name property
• Inside the about.html partial, add the directive ng-model to the tag. Set the value of the ng-model directive to name
• Type into the input field. If done correctly, the input should be rendered alongside the input field
• Add links to navigate between these views using ng-href. This is a directive in the ngRoute module.

• Create a separate module named Codesmith.UserFactory (place inside ./client/factories/userFactory.js)
• Create a factory named UserFactory inside the Codesmith.UserFactory module. This will return an object with a name and age property, which should be equal to your name and age.
• Make sure this new Factory is included by a <script> tag and added to the dependencies. Which module should be dependent on this factory? Is it myApp?
• Inject UserFactory inside AboutController.
• Add a ng-submit directive to the on the about.html partial
• Add a function called save in AboutController that, when submitted, saves the name inside the UserFactory object.
• Add an age field to the form. Which also gets saved.
• Inject UserFactory inside HomeController
• Have the HomeController name property equal to the UserFactory name such that name saved in the /about page is displayed. (You should be able to navigate between these without losing the changes to your UserFactory).

• Create another factory called MessageFactory which we'll use to connect to the messaging API.

http://slack-server.elasticbeanstalk.com/messages

• Inside the MessageFactory, create a method called fetch that makes a GET request to the API. The returned object should be the promise object returned from the $http request.
• Inject this factory into the HomeController.
• When the user visits the home page, the HomeController should get the messages and use the promise to store the array of messages inside the messages property of the HomeController scope.
• Use the ng-repeat directive to display all the messages in the home partial
• Add a post method to your factory which will make a post request to messages. This should also return the promise.
• Add a text input to this page which will be used to post a new message to the API. When submitted, have the HomeController get the new message from this input and call the post method passing the new message as an argument. (Don't forget to send the name too).
• Be sure to add your new message to the messages property and update the page with your message.

• Add a dropdown menu that enables the user to sort the data by different fields. This can be done with plain old JavaScript, but there is a cleaner way! Look up Angular filters.
• Add a search bar that can show only the messages that match the search phrase.

Many APIs have Angular plugins (a.k.a. modules) that let Angular apps use them very easily. Its ease of use should be on par with libraries like ng-route. All it takes is 3 simple steps:

1. Include your JS file with a <script> tag.
2. Add your module to their app's dependencies.
3. Start using this module's directives and services.

Write a JS file with a new Angular module that contains an element directive (similar to a React component). Demonstrate its use by showing it in myApp. Create a new view for your API that shows styled data on this view. To be clear, all that should be required to get your API's data into myApp is these three steps:

1. Include your JS file with a <script> tag ini index.html.
2. Add the new module to myApp dependencies.
3. Placing the element directive (custom tag) into the view.

• Replace with ngRoute with ui-router.
• Support Markdown in your messaging platform. Have messages containing markdown render to HTML on your page. You'll need to compile it to HTML and then render it. Check out MarkdownJs and Angular's $sce service.
• Have the messages list update with new messages every 3 seconds.
• Use ngAnimate to have a "fade" effect when you transition between pages.

• https://github.com/johnpapa/angular-styleguide
• https://docs.angularjs.org/guide/concepts
• https://docs.angularjs.org/guide/controller
• https://docs.angularjs.org/guide/providers