Alternative to $scope in Angular 2.0

In Angular 2.0, there will be no $scope.

What is the alternative to that? How will I be able share data between the components? Will the scope option be available in directives? More practically, is there a current alternative to that that I can get acquainted with?

I am aware of controller as but I read that controllers will be eliminated too.

Confused on such a revolution the Angular team has started.

Angular 2 – Substitute for $scope.$apply?

$scope.$apply will no longer be part of Angular 2. Then how do we let Angular know to update the DOM if any of the bound properties have been changed outside the regular angular execution context?

Taken from a blog post by Minko Gechev:

No more $scope.$apply

But how then AngularJS knows that anything outside it’s execution context has taken a place? Lets think where the changes might come from:

  • setTimeout
  • setInterval
  • prompt (yeah, there are people who still use it…)
  • XMLHttpRequest
  • WebSockets

For which the answer is:

enter image description here

I understand that patching the browser built-in javascript functions to notify of any changes to Angular is something that can be done in a relatively safe manner (without introducing subtle bugs) and would be very convenient for the developer. But what about third party APIs (such as jQuery.fadeIn) or if the browser exposes some new asynchronous API which isn’t covered? What’s the substitute for old $scope.$apply?

Call angular2 method from javascript function

I am using jquery kendo ui grid and from that edit button i am trying to call angular2 method. My setup is simple:

export class UserComponent implements OnInit {
     constructor( @Inject(UserService) public userService: UserService,  @Inject(FormBuilder) public fb: FormBuilder) {
...
}


 edit():void{ }

 onInit() {
   $("#grid").kendoGrid({
   ....
   click: function () {
     // Call angular2 method of the current instance
   });
}
}

It’s working code the only issue is this. I can call the angular2 method by just stating

 click:this.edit

or

 click: function () {
         UserComponent.prototype.edit()
       });

but in both case the method is not from the current instance. So in this case i cannot make use of the http service or any local variable or methods inside edit

Angular 2 User Input Tutorial

I am trying to understand Angular JS 2. When I try the code mentioned in https://angular.io/docs/js/latest/guide/user-input.html, I get a blank value inserted into the list after typing the text in input and hitting the enter key. Here is the ES5 I tried:

//ES5
function TodoList() {
  this.todos = ["Eat Breakfast", "Walk Dog", "Breathe"];
  this.addTodo = function(todo) {
    this.todos.push(todo.value);
  };
  this.doneTyping = function($event) {
    if($event.which === 13) {
      this.addTodo($event.target.value);
      $event.target.value = null;
    }
  }
}
TodoList.annotations = [
  new angular.ComponentAnnotation({
    selector: "todo-list"
  }),
  new angular.ViewAnnotation({
    template:
      '<ul>' +
      '<li *ng-for="#todo of todos">' +
      '{{ todo }}' +
      '</li>' +
      '</ul>' +
      '<input #textbox (keyup)="doneTyping($event)">' +
      '<button (click)="addTodo(textbox.value)">Add Todo</button>',
    directives: [angular.NgFor]
  })
];
document.addEventListener("DOMContentLoaded", function() {
  angular.bootstrap(TodoList);
});

This exactly as mentioned in Angular.io/docs , has anyone else seen same issue? Is there an error in the documentation?

Import file issue in angular 2

I made a simple program of hello text in angular 2.I am able to make that program but i have some problem in understanding?

Here is my code
http://plnkr.co/edit/BPdzCZeXbyzQrgmLzO86?p=preview

  • I know import is a keyword es6 But on which file it is defined .Browser only understand java script like (documnet.getElementByID()) how browser understand the import.on which file import is defined?

    import {Component} from ‘angular2/core’

  • where is ‘angular2/core’ file ? and same where is this file
    import {bootstrap} from ‘angular2/platform/browser’

  • Browser know the javascript file .Now I am using .ts or typescript file .which file is used to transcomplie the .ts to .js file before loading the browser.

I am not sure but I think this code is doing something to convert the .ts file to .js file.I need to know which file this code is using to transcompile the .js file ?

 <script>
      System.config({
        transpiler: 'typescript', 
        typescriptOptions: { emitDecoratorMetadata: true }, 
        packages: {'app': {defaultExtension: 'ts'}} 
      });
      System.import('app/boot')
            .then(null, console.error.bind(console));
    </script>

any update ?

Magento with Angular Js

I want to build Magento store with Angular-Js for that I have read so many article on net and check stack overflow questions but I am not getting up to the mark answer so I decided to ask with my own problem.

For ex: I want to use Angular-Js in Magento for list page(category page) for that what I need to change and where?In which file I need to add angular controller , model , route and all stuff related angular? If any one is there who has used Angular with Magento before please help me to clear my problem.

I think we need to change core Magento controller files may be but not sure.
Thanks in advance.

In angular how to write strings based on condition of numbers

I have {{ index+1 }}

I need to display “one” if number is 1 in the expression above.

Display “two” if number is 2 in the expression above and so on up to 6
Display “six” if number is 6.

Since I need only these 1 to 6, I do not prefer to go to JavaScript based number to word format conversion and using it as filter in the above expression. Because, the grunt reports heaps of problem in that solution, so I am looking for a simple conditional display only for this boundary between 1-6.

Argument 'myController' is not a function, got undefined

I’m trying to setup some controllers in my angular app but I’m not sure why I can’t make them working, since I think I’m using similar approach as I’ve done before.

I declared app.js file:

'use strict';

var modules = [
    'app.controllers',
    'ngCookies',
    'ngResource',
    'ngSanitize',
    'ngRoute',
    'ui.router',
    'LocalStorageModule',
    'angular-loading-bar'
];

var app = angular.module('app', modules);

app.config(function($httpProvider) {
    $httpProvider.interceptors.push('authInterceptorService');
})

app.factory('forgotPasswordService', ['$http', function ($http) {

    var fac = {};

    fac.forgotPassword = function (forgotPasswordData) {
        return $http.post('/api/Account/ForgotPassword', forgotPasswordData)
    };

    return fac;

}])

app.factory('signUpService', ['$http', function ($http) {

    var signUpServiceFactory = {};

    signUpServiceFactory.saveRegistration = function (registration) {
        return $http.post('/api/account/register', registration);
    };

    return signUpServiceFactory;
}]);

Then controllers.js file with this content:

angular.module('app.controllers', [])
    .controller('signupController', [
        '$scope', '$window', 'signUpService',
        function($scope, $window, signUpService) {
            $scope.init = function() {
                $scope.isProcessing = false;
                $scope.RegisterBtnText = "Register";
            };

            $scope.init();
            $scope.IsLimitedCompany = null;
            $scope.registration = {
                Email: "",
                Password: "",
                ConfirmPassword: ""
            };

            $scope.signUp = function() {
                $scope.isProcessing = true;
                $scope.RegisterBtnText = "Please wait...";
                signUpService.saveRegistration($scope.registration).then(function(response) {
                    alert("Registration Successfully Completed. Please sign in to Continue.");
                    $window.location.href = "login.html";
                }, function() {
                    alert("Error occured. Please try again.");
                    $scope.isProcessing = false;
                    $scope.RegisterBtnText = "Register";
                });
            };
        }
    ]);

And my html file:

<!DOCTYPE html>
<!--[if !IE]><!-->
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<!--<![endif]-->
<!-- BEGIN HEAD -->
<head>
    <script src="/Metronic/plugins/jquery.min.js" type="text/javascript"></script>
    <script src="../assets/js/bootstrap.min.js"></script>
    <script src="/Scripts/angular.js"></script>
    <script src="/Scripts/angular-cookies.min.js"></script>
    <script src="/Scripts/angular-resource.min.js"></script>
    <script src="/Scripts/angular-sanitize.min.js"></script>
    <script src="/Scripts/angular-route.min.js"></script>
    <script src="/Scripts/angular-ui-router.min.js"></script>
    <script src="/Angular/app.js"></script>
    <script src="/Angular/controllers.js"></script>
    <script src="/Scripts/angular-local-storage.min.js"></script>
    <script src="/Scripts/loading-bar.min.js"></script>
    <script src="/Angular/Services/authInterceptorService.js"></script>
</head>
<body class="login">
    <div class="content" ng-app="app">
        <!-- BEGIN REGISTRATION FORM -->
        <div class="register-form" ng-controller="signupController">
            <h3 class="font-green">Sign Up</h3>
            <p class="hint"> Enter your account details below: </p>
            <div class="form-group">
                <label class="control-label visible-ie8 visible-ie9">Email</label>
                <input class="form-control placeholder-no-fix" ng-model="registration.Email" type="text" autocomplete="off" placeholder="Email" name="username" />
            </div>
            <div class="form-group">
                <label class="control-label visible-ie8 visible-ie9">Password</label>
                <input class="form-control placeholder-no-fix" ng-model="registration.Password" type="password" autocomplete="off" id="register_password" placeholder="Password" name="password" />
            </div>
            <div class="form-group">
                <label class="control-label visible-ie8 visible-ie9">Re-type Your Password</label>
                <input class="form-control placeholder-no-fix" ng-model="registration.ConfirmPassword" type="password" autocomplete="off" placeholder="Re-type Your Password" name="rpassword" />
            </div>
            <div class="form-group">
                <label class="control-label visible-ie8 visible-ie9">Role</label>
                <select name="role" ng-change="CheckRole()" ng-model="registration.Role" class="form-control">
                    <option value="">Role</option>
                    <option value="Borrower">Borrower</option>
                    <option value="Introducer">Introducer</option>
                    <option value="Investor">Investor</option>
                    <option value="Valuer">Valuer</option>
                </select>
            </div>
            <div class="form-actions">
                <button type="button" id="register-back-btn" class="btn green btn-outline">Back</button>
                <button type="submit" id="register-submit-btn" class="btn btn-success uppercase pull-right" ng-click="signUp()" ng-disabled="isProcessing" value="{{RegisterBtnText}}">
                    Submit
                </button>
            </div>
        </div>
        <!-- END REGISTRATION FORM -->
    </div>
</body>
</html>

Any idea what am I missing?

I’m getting this error:

Error: [ng:areq] Argument ‘signupController’ is not a function, got undefined