All geek questions in one place

Angular - UI.Router does not load component

I can not get ui.router to load the component on index.html through the local host or otherwise:

index.html

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
    <script src="//unpkg.com/angular-ui-router@0.3.1/release/angular-ui-router.js"></script> <!-- used to route views -->
    <script src="js/components.js"></script>

    <body ng-app="myApp">
    <div> <!-- main content -->
         <ui-view></ui-view>   <!-- this directs ui-router to put the home view here-->
    </div>

components.js

    var app = angular.module('myApp', ['ui.router']); //makes a call to the Angular API to create our app, configured with the ui.router plug-in
    //configure our view router
    app.config(function($stateProvider) { 
      //create our different views as objects
      var mainState ={
        name: 'main', //name of the object
        url: '', //url to point to, or that causes this view to be triggered
        component: 'home', //component that works with the data, loads the template
        resolve: { //data to bind to our component
          data: function(Resource) {
            console.log(Resource.test()) //returns "Hello World"
            return Resource.test() 
          }
        }
      }
      //call the states
      $stateProvider.state(mainState); 
    })
    app.service('Resource', function ($http) {
      var service = {
       test: function() {
          return "Hello world"
        }
      }
      return service;
    })
    app.component('home', {
      bindings: { data: '<'}, //make the data we loaded into the view from the factory available to this component
      template: "<p>{{data}}</p>", //this is the html that we will plug our data into
      controller: function () {
        console.log(this) //does not call
      }
    })

"Hello world" loads, like data, when I do $ http through the service. But it is not passed to the component. Any thoughts?

+4
source share
2 answers

componentthe attribute is accessible from ui-router@1.0.0(see here and CHANGELOG.MD - it was added to 1.0.0-aplpha), therefore it is not available 0.3.1.

This is where jsFiddle works (from 1.0.3 beta)

+10
source

By default, data will be applied when viewing using the controller alias $ctrl

template: "<p>{{$ctrl.data}}</p>",

Demo plunkr

0

Source: https://habr.com/ru/post/1655656/

More articles:


All Articles