To your original question:
"How can I initialize a variable in controller from a view (for example
fetching in from ASP.NET <http://asp.net/> model)?"
In general treat variables in the template as read only. The overall
pattern for this is
View << Responsible for displaying data
<p>Hello {{user.name}}</p>
Controller << Responsible for initializing or hooking up services to be
exposed
app.controller("appCtrl", function ($scope, userService) {
// expose return from service into the scope for the view
$scope.user = userService.getCurrentUser();
}
Service << Responsible for doing most of the work
app.service("userService", function ($http) {
return {
getCurrentUser: function() {
// using $http or $resource to get the data and return a promise,
when resolved will chain all the way up to the view
}
}
}
You can set things explicitly in the controller
app.controller("appCtrl", function ($scope) {
$scope.user = {name: 'Denis', skills: ['Angular', 'HTML', 'CSS']}
}
Generally you only want to do this when setting "basic" variables such as
initial UI states. The other case is when you are just experimenting with
Angular and fiddling with models and how to display things. Other then that
nontrivial models and functions should be placed in services, and hooked
into the view via the controller.
A thinking shift with Angular is to embrace promises and scope auto
updates. Code as if the data is instantly available, even through you'll be
waiting for the server. In the view just write the template {{ myobj.attr
}} to be displayed. Controller hooks up the object from the service. When
the application first loads myobj won't be there, which is fine, nothing
will display. Eventually when the server comes back myobj and attr are set.
Since they are on the scope, the $digest cycle will kick in seeing it needs
to update. It updates when the data comes back, and everything works. If
you need to indicate loading or things that you can use something like:
<span ng-hide="myobj.attr">Loading...</span>. When the object is loaded,
the ng-hide tag will cause the loading text to disappear for you. I would
highly recommend reading about promises and embrace them. It will make your
life much easier.
Hope that help,
~Owen
On Tuesday, 11 March 2014 10:37:26 UTC-7, Denis Ipatov wrote:
>
> A bit. The world of AngularJS is still seems complicated for some quite
> trivial tasks :-)
>
>
> вторник, 11 марта 2014 г., 20:55:59 UTC+4 пользователь Kamal написал:
>>
>> Denis,
>>
>> Its because $watch is only executed when there is a change in value for
>> the give variable to watch, in this case the ng-init gets executed after
>> the controller (by that time your log of x is already executed) where the
>> value is change there by you see myData as `world`. Simply put `x` and
>> `$scope.myData` are two different variables where `x` is being updated to
>> `$scope.myData` on in case of value change of `myData` using the $watch
>> which is invoked after the controller is initialized by the time your log
>> for x is executed it still undefined as `$scope.myData` is not yet
>> defined/change this happens after when the ng-init is executed. As far as
>> my understanding goes the controller is executed (to initialize the
>> necessary scope) first and later the directive (in this case ng-init). I
>> hope this clarifies it a bit.
>>
>> On Tuesday, 11 March 2014 22:06:05 UTC+5:30, Denis Ipatov wrote:
>>>
>>> I made another experimet in code:
>>>
>>> var app = angular.module("app", []);
>>>
>>> app.controller("appCtrl", function ($scope) {
>>> var x;
>>> $scope.$watch('myData', function () {
>>> if ($scope.myData) {
>>> //here here you can handle your data
>>> x = $scope.myData;
>>> console.log('myData:', $scope.myData);
>>> }
>>> });
>>> console.log('my x:', x);
>>>
>>> Result is undefined. Why?
>>>
>>> my x: undefined app.js:12 <http://localhost:7007/Scripts/app.js>
>>> myData: world
>>>
>>>
>>> Hi Denis,
>>>>
>>>> No that's not the only way, but it's an easy way to get started,
>>>> What do you know already of angular?
>>>> you already know something about modules and dependency injection ?
>>>>
>>>> here is another plunk,
>>>> http://plnkr.co/edit/eauguSJOoATrATATwn6E?p=preview
>>>> if you have questions about it, don't hesitate to ask!
>>>>
>>>> Regards
>>>> Sander
>>>>
>>>>
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
