LEARNING ANGULAR 1.x
Angular is a javascript framework. It’s really good for single-page web apps or websites. A single-page website is a website that doesn’t possess multiple pages (lol). Instead, the contents of the page change with every click on the navigation for the other (hypothetical) pages. This means that new content is dynamically loaded onto that same page directly from the server.
For example, if you’re going to build a website, you’d probably have the pages like the home page (index.html), the about page (about.html), the blog page (blog.html) etc. But for single-page websites, you don’t need this because the page does not reload at any point, neither does it load other pages, only the content does and this could give the illusion that it’s loaded a new page. Angular combines our knowledge of HTML, CSS and Javascript. It’s made up of different components like the controllers, the directives, the expressions, the modules and the services. I’ll be discussing Controllers, Directives and Services in this article.
Controller
You shouldn’t blame me for this: that every time I’m writing code for the controller or thinking about how to make the controller work, the thing that’s playing in my head is Drake’s “Controlla”. In fact, I’m officially insisting that this should be the theme song for all angular controllers. Controllers are as literal as they can be. The controller is the part where we write what we want our application to do. Like its behaviour or its functionality. Using controllers, we can define our application’s behaviour by defining functions and values. Controllers help us get data onto the page. For example,
app.controller(‘StoreController’, function() {this.product = “gem”});
This controller tells the section of our application controlled by the Store Controller that a property called “product” has a value of gem.
Directives
This is like the connector of angular with html. You’d need it in your HTML markup. It’s how you tell your application through HTML to do something that’s either already pre-defined by angular or defined by yourself in the functions. A directive is a marker on an HTML tag that tells HTML to run or reference some Javascript code. There are many directives, all of which can be found in the Angular documentation. These are some examples:
ng-app — This initializes an Angular JS application
<body ng-app = “Todo”>ng- repeat — This is used to loop over a list
<ul class=”todo-list” ng-repeat=”todo in todos track by $index”>ng-if — This is used to remove or recreate an element. If the value of an expression is set to false, it is removed. Otherwise, it is recreated.
<button ng-if=”!todo.isComplete” class=”bt bt-achieve” ng-click=”done(todo)” id=”complete”>Complete</button>ng-hide/ng-show — This is used to to either hide or show an element if the value of an expression is set to true.
<ul class=”todo-list” ng-show=”!todo.isComplete”>The difference between ng-if and ng-show/ng-hide is that ng-if completely removes an element while ng-show/ng-hide only affects the visibility of the element using the CSS display property.
Services
Angular JS services are substantiable objects that are wired together using dependency injections (DI). Services give your controller additional functionality. You can use a built-in angular service or you can create your own service. Services that you create by yourself are called custom services.
Some examples of built-in service models are:
$http — This is used for fetching a web service
$log — This is used for logging messages to the Javascript console
$filter — This is used for filtering an array
It’s a good idea to create your own custom services in your application when you want to create functionality for specific purposes. You can create a service by registering the service’s name and service factory function with and Angular JS modules. An example is:
app.factory(‘CalcService’, function() { //registering the factoryreturn {multiply: function(x) {return x * x;}
Thanks for reading!
