Ngclick Assignment Help

Getting used to the concept of in Angular is among the more difficult concepts to fully grok when first being introduced to the magical land of Angular.

Like anything else though, "once you understand it, it's really not that bad"...

$rootScope

This is the mother of all scopes. Quite literally. All other scopes in Angular descend from it. The is created on the DOM element where you set up .

You can prove this to yourself by simply adding to the tag of a page, and running this in the console...

That will log out the in the console.

If you go run any of the hello world examples for angular out there now, such as one like from the Angular home page...

There is a directive here on the input called . The job of a directive is to link and element to a scope, and allow you to work with that DOM element by adding behavior, or transforming it.

The directive will bind , , and elements to a scope.

In this case, this directive is linking an element to the by adding a new property to it.

Angular attaches to the change event of that element. Any time the change event fires, angular updates the value of on the scope with the value of the element. This in turn tells anybody interested in the value of that its value has changed. This is all done through angular's crazy dirty checking stuff.

In this case, there's no property defined on yet, so angular will just create it for you.

That concept is all known as 2 way data binding; the concept of changing a model value which gets reflected in the UI and changing a UI that gets reflected in the model.

$scope in controllers

The first step to understanding in an Angular controller is to truly understand what a controller's job is in the first place.

The job of a controller is to pass data from the model, to the view.

That's it. Plain and simple. The view (aka user) asks for something from the controller, and the controller turns to the model and says, "hey, I need this thing". Then the controller takes that thing, and hands it back to the view.

Controller are meant to be thin, and testable by keeping as much of your problem solving and state manipulation code inside of a "model".

I generally think of the "model" in angular as a combination of angular services, and simple objects that you attach to scopes. So in essesnce your model can be whatever you want it to be which can be a little confusing at first.

The general idea though is that whatever your "model" is, you use to tell your view about it. This is why some people will call a "viewModel".

A controller's job with respect to Angular is to set up functions and properties that the view can use. The primary way you set these functions and properties up is by injecting into the controller.

When you use the to bind an element to the view, a new is created which prototypically inherts from the .

You can then attach these values to the view with directives and expressions.

Nested Controllers

This is where things get weird...

Controllers can be nested so you have to be careful about a few things. Because of the fact that the scopes do inherit from other scopes, if you create a primitive value (string, number, boolean) on a parent scope, the child scope will have an be able to manipulate the value.

What will happen though is if a child is changing primitive values on a parent, it will end up creating a copy of the value in the child, and break the inheritance chain.

This can be avoided...

should always have a "." in the name

As a rule of thumb this can help avoid the problem of overwriting a parent's scope values.

When you add a object onto a controller's scope, you can edit that user object's properties in the child and not break the inheritance chain from the parent.

Another thing you can do when nesting controllers is use the newer controllerAs syntax.

Using the controllerAs syntax is a small syntax change that can just add some clarity to where different values come from.

Notice how in the controller rather than assigning the values to , they are actually assigned to .

Don't let this fool you too much. When you use this syntax, that simply means it will take the values you put on , and under the covers, assign them to .

Using is effectively the same thing as this...

It's just a little cleaner to not have to use when you don't need to do anything but assign values and functions.

scope in directives

Another sticky place when working with scopes in Angular is when writing custom directives. Part of the confusion comes from the fact that when you create a directive, one of the properties you pass on the directive definition is ...

There are a few options when setting up scope for a directive. First of all, the default value for this option is .

This default can lead to some dangerous issues especially when trying to create re-usable directives...

When you have , the a new scope will NOT be created for this directive. That means it will use the parent scope by default. So, if you think you're creating a property on a scope local to your directive, you are in fact actually creating a property on the parent scope. Not a very re-usable solution.

Another option you have is to pass .

Passing this option will tell angular to create you a new child scope for this directive. This child scope will be similar to how the scope in the works. It will prototypically inherit from it's parent in the exact same way.

This means you'll have access to the parent scope, but also be able to add new properties to a scope local to the directive...

In this example you can see that because of prototypical inheritance, this directive's scope will have access to a parent property. The difference now though is that when a NEW property is added to the scope, it will be created locally within the directive's scope and not directly on the parent scope.

The Isolate Scope is the most complicated form of scope for directives.

When an object literal is passed as the parameter value for on a directive, a new scope is created for the directive. It still inherits from the parent scope, however only the named properties from the parameter will be passed into this new isolated scope.

You can almost think of the option as a filter with three different ways of filtering. You can see each of the three in the previous example: "@", "=", and "&".

Here's examples on how to use each of the three methods.

=

You would then use this directive like...

By adding to the property of your directive, you've basically setup a way to pass an object from the parent scope down to the directive scope by using as an attribute on the directive.

It's also worth noting that if you wanted to, with any of the three scope properties you can pass an optional alias name along with '=, @, or &', there will be an example of this later.

When using the sign as an option you have basically set up a two way binding between the directive and the parent scope. If you then change in the directive, the change will be reflected in the parent's property.

The option will always be a single string value (no {{}}'s are needed here) representing some property on the parent scope of the directive. So, here in the previous case, is a property on the 's scope.

When you type in the input box generated by the directive, you'll see . Changing the value of this text box will actually end up changing the from !

@

The option of scope is a way to pass in a string value, or a value containing 's that will get interpolated.

This is effectively a one way binding. You cannot change the value on the directive scope and have it be reflected in the parent scope, unlike with the option. If you want to reference properties from the parent scope, you must use the curly braces around them. Whatever you pass in as the value of a property that uses the option will be interpolated.

Here's an example...

And this is how you would use that directive...

Notice that in the the , is a value on the parent of the directive in the .

On the directive scope, because of , you'll see that you can pass values via the attribute and the will be added to the scope. String interpolation will kick in, and is going to equal "Austin Danger Powers". That's also what the template will render.

&

The last option for in a directive is . This allows you to fully invoke an expression within the context of the parent scope. You basically get a wrapper function that wraps whatever you pass in so you can invoke it in the directive.

The following example is a bit trivial, but in order to fully understand this concept, it's a good place to start.

So, you can see here the . This means that in your , you'll have a available. You can then use that function in the scope of the directive and pass in values via a hash map that will execute in the parent's context.

The way this works is by passing in an object that has keys which match the arguments you pass in via the HTML when you invoke the directive...

See how here in the HTML you have...

Here's one more practical example of how you can use this option in a directive scope...

In this example, there's 2 inputs in the template. One bound to , and one bound to . Since neither of these are previously defined in any scopes, they'll be added to the directives isolated scope.

Then the button has an directive. Every time that this button is clicked, it will evaluate the expression. Since the function is defined in the parent directive, and passed in through the , you can then pass in the map of values to execute the add function.

Since simply retuns a value, you can then assign which will then be another value in the directive scope and can also be used in the template with .

Conclusion

Hopefully this helps groking all the scopes in Angular! There's a lot of things to fully wrap your head around with Angular and this is just one of the pieces. Like learning any framework though, it just takes a bit of time and practice to get things really going and fully comprehended.

The last feature I need to add for the video sample is the ability to edit and delete videos. One approach with Angular is to bind edit and delete button click events to the model using the ng-click click directive, which we've seen before.

<tr ng-repeat="video in videos"> <td>{{video.Title}}</td> <td>{{video.Length}}</td> <td> <button ng-click="editVideo(video.Id)">Edit</button> <button ng-click="deleteVideo(video.Id)">Delete</button> </td> </tr>

What's new in the two usages of ng-click here is the complexity of the expression inside. More on expressions later, but ultimately the expression will invoke delete and edit methods with parameters, where the delete method can look like the following:

$scope.deleteVideo = function (id) { $http.delete(serviceUrl + "/" + id) .success(function () { $scope.videos = _.reject($scope.videos, videoFinder(id)); }); };

This code is using Underscore's reject to help update the model.

All the HTML and JavaScript for the sample is in a gist, and if you followed (closely) the original course at Pluralsight, you might remember the original sample was around 120 lines of script with jQuery and Handlebars. The same features in Angular require around 60 lines of script. However, we've only scratched the surface of what we can do with AnjularJS. Not only can we write less code, we can add some new features using additional Angular APIs, and still have a testable controller.

We'll look at some of these additional features in the future. For now I wanted to return to the ng-click expressions.

Expressions

At first glance, ng-click looks similar to writing JavaScript code inside an onclick attribute, which we've learned to avoid for many good reasons. However, the resemblance is only superficial. An ng-click directive doesn't prevent progressive enhancement or go against the true spirit of unobtrusive JavaScript. I think of ng directives and other {{expressions}} as natural extensions to the declarative language of HTML. Angular uses a compiler service at runtime to process the directives and construct linkages between the HTML view and a model.

Another significant difference between ng-click and onclick is the execution context. Code inside an onclick attribute executes against the global window object, while an expression inside of ng-click executes against a specific scope object, typically the scope object representing the model for the current controller.

In other words, if you wanted to invoke the global alert function in JavaScript, the following onclick handler will work:

<button onclick="alert('hello!')">Say Hi</button>

However, the following ng-click code will not invoke the global alert function:

<button ng-click="alert('hello!')">Say Hi</button>

The only way for the code inside the directive above to work is to have an alert method defined for the current scope.

$scope.alert = function(message) { $window.alert(message); };

In this example we'll forward the call to the global alert function by using a well known $window service that is injected into the controller (which is a testable approach to using the window object).

The code in the ng-click attribute for the edit and delete buttons actually executes against a scope defined by the ng-repeat directive. The ng-repeat directive is providing a video for every object in the videos collection, and the repeat scope prototypically inherits from the controller scope (which is why both deleteVideo from the controller scope and video.Id from the repeat scope are available to use in the expression). For more details on how scopes in Angular work, see "The Nuances of Scope Prototypal Inheritance". Scopes are important to understand.

One final difference between ng-click and onclick is that the expression syntax supported by ng-click is like a subset of JavaScript. You can make method calls, use a ! operator, and even perform an assignment (which is frowned upon), but you cannot use flow control statements, among other things. Remember the view is supposed to be simple, so expressions typically reference a property or invoke a method to keep most of the logic inside a controller.

0 thoughts on “Ngclick Assignment Help”

    -->

Leave a Comment

Your email address will not be published. Required fields are marked *