My first days with AngularJS
To start a project, the first thing you want to do is to tell AngularJS that you want to use it. This is done inside your view (e.g. index.html) by appending an attribute to the html-tag.
<html lang="en" ng-app>
AngularJS is a MVC-framework, therefore using controllers is essential when working with it. To create a controller, you first have to create your app-variable, on which you can append it. When creating an app you can inject various dependencies, depending which services and features you’ll need, the same goes for your controllers. Usually you’ll at least use the $scope variable, which allows you to transfer data from your controller to your view and the other way around. Finally you have to hook your controller to your view. This is done with another directive (ng-controller).
Creating multiple controllers
To create more than one controller, you have to create a variable, which contains all of them. Then you simply inject this container into your app when creating the app-variable. To declare which controller is affecting which part of your view, you use the “ng-controller=’ControllerName’“ directive.
Services allow you to add some additional functionality to your app. It can help splitting up your app into smaller and cleaner modules. This is especially useful if you want to use the same kind of code on multiple occasions. Creating a service is rather simple, you call the factory() function on your app-variable, then declare the name of your service and whatever it should be able to do.
To access it’s functionality you have to inject it into your controller by adding the name to the required dependencies.
Validating forms and input fields is another easy thing to do. Basically all you have to do is adding a bunch of directives to your html tags to setup proper validation and the rest is done automatically. First you should add the „novalidate“ attribute to the form tag to prevent browser validating on their own and getting in your way. Then you can append your custom validation rules to each input field. You have the following options:
- ng-required: (boolean) the form is only valid if this field is filled in
- ng-minlegth/ng-maxlength: determine a min/max character limit
- ng-pattern: validate your input with a regular expression
Another nice feature is that AngularJS recognizes and validates email fields automatically and you can also access a few other properties to check whether an input field has been used or not.
AngularJS is a proper MVC framework, therefore the possibility to route users based on a their URL exists. To do so you have to expand the framework with an extra module (angular-route.js) available on the official website. Like every other additional module, you have to inject it when creating the app.
var myApp = angular.module('myApp', ['ngRoute']);
Configure your routes
When working with routes you definitely want to use multiple controllers. To decide which route belongs to which controller and html-partial, you use the config() function, after creating your app-variable.
Passing route parameters
If you need to fetch some id or any other information from the URL, add it inside your config function.
Inside your controller you can access this variable by adding the $routeParams variable to your dependencies.
Working with AngularJS has been a pretty pleasant experience so far. The workflow seems extremely fast and I really look forward digging deeper into this framework during the next months. Any recommendation on what aspect of the framework I should focus after having a good overview of the basic features?