i try to integrate angularJS into Symfony2 but I am having some difficulty
Below you will find the code of the page base.html.twig and code of my page app.js
<html lang="fr" ng-app="routeApp">
<head>
<meta charset="UTF-8" />
<title>
{% block title %}
Accueil !
{% endblock %}
</title>
{% block stylesheets %}
<link rel="stylesheet" href="{{ asset('bundles/ardbackend/components/bootstrap/dist/css/base-admin.css') }}" type="text/css" />
<link href="{{ asset('bundles/ardbackend/components/bootstrap/dist/css/bootstrap.min.css') }}" rel="stylesheet" type="text/css"/>
<link href="{{ asset('bundles/ardbackend/components/bootstrap/dist/css/bootstrap-responsive.min.css') }}" rel="stylesheet" type="text/css"/>
<link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />
{% endblock %}
{% block javascripts %}
<script src="{{ asset('bundles/ardbackend/components/angular/angular.min.js') }}"></script>
<script src="{{ asset('bundles/ardbackend/components/angular/angular-route.js') }}"></script>
<script src="{{ asset('bundles/ardbackend/components/angular/app.js') }}"></script>
<script src="{{ asset('bundles/ardbackend/bootstrap/dist/js/bootstrap.min.js') }}"></script>
<script src="{{ asset('bundles/fosjsrouting/js/router.js') }}"></script>
<script src="{{ path('fos_js_routing_js', {"callback": "fos.Router.setData"}) }}"></script>
{% endblock %}
</head>
<body>
<div ng-view>
<nav>
Page d'accueil
Page de contact
</nav>
{% block body %}
{% endblock %}
</div>
</body>
and this is my app.js
'use strict';
/**
* Déclaration de l'application routeApp
*/
var routeApp = angular.module('routeApp', [
// Dépendances du "module"
'ngRoute'
]);
/**
* Configuration du module principal : routeApp
*/
routeAp
p.config(['$routeProvider',function($routeProvider) {
// Système de routage
$routeProvider
.when('/login', {
templateUrl: Routing.generate('login'),
controller: SecurityController
})
.when('/', {
templateUrl: Routing.generate('pour_test'),
controller: DefaultController
})
.otherwise({
redirectTo: '/login'
});
}]);
I did not understand, what's missing in my code to make it work
any help please ?
try to change start and ending symbols in angular , because as I understood it conflicts with same notation
customInterpolationApp.config(function($interpolateProvider) {
$interpolateProvider.startSymbol('//');
$interpolateProvider.endSymbol('//');
});;
Related
I can load the page with items if I include the angularjs declaration inside script tag in index.html. Otherwise, not working.
app/templates/app/index.html
{% load staticfiles %}
<html>
<head>
<link rel="stylesheet" type="text/css" href="{% static "components/bootstrap/dist/css/bootstrap.css" %}">
<script type="text/javascript" src="{% static "javascript/app.js"%}"></script>
<script type="text/javascript" src="{% static "components/angular/angular.min.js"%}"></script>
<script type="text/javascript" src="{% static "components/angular-route/angular-route.js"%}"></script>
</head>
<body ng-app="store">
<div ng-controller="ItemController">
{% verbatim %}
<div class="panel" ng-repeat="item in items">
<p>{{ item.id }}</p>
</div>
{% endverbatim %}
</div>
</body>
</html>
app/static/javascript/app.js
angular.module('store', ['ngRoute'])
.controller('ItemController', function($scope, $http) {
$http.get('/api/items').success(function(data){
$scope.items = data;
});
});
After installing the angular plugin on chrome, when I load the page, it shows me this error. "Module was created but never loaded". After playing for a while, I figure it is because I load my app.js before I load angular.js.
I have created a simple AngularApp and am trying to use it with symfony2.8 . As suggested I am using friendsofsymfony/jsrouting-bundle to expose my route. Here is my twig(HTML) code ie. index.html.twig :
<!doctype html>
<html ng-app="App" >
<head>
<meta charset="utf-8">
<title>Todos $http</title>
<link rel="stylesheet" href="style.css">
<script src="{{ asset('bundles/fosjsrouting/js/router.js') }}"></script>
<script src="{{ path('fos_js_routing_js', { callback: 'fos.Router.setData' }) }}"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
<script src="app.js"></script>
</head>
{% block body %}
{% verbatim %}
<body ng-controller="TodoCtrl">
<ul>
<li ng-repeat="todo in todos">
{{todo.text}} - <em>{{todo.done}}</em>
</li>
</ul>
</body>
</html>
{% endverbatim %}
{% endblock %}
I am pretty sure I am making some mistake here. Here is the AngularJS code ie. app.js :
var App = angular.module('App', []);
App.controller('TodoCtrl', function($scope, $http) {
// window.alert('hi');
$http.get(Routing.generate('AppBundle/Resources/public/js/todos.json'))
.then(function(res){
$scope.todos = res.data;
});
});
And if it is needed here is the todos.json :
[{ "text":"learn angular", "done":true },
{ "text":"build an angular app", "done":false},
{ "text":"something", "done":false },
{ "text":"another todo", "done":true }]
When I try to run the output I get is
As you can notice in the console angular.element($0).scope() returns undefined.
Any ideas?
EDIT:
I have made some changes in index.html.twig :
{% extends 'base.html.twig' %}
{% block javascripts %}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
<script src="{{ asset('bundles/fosjsrouting/js/router.js') }}"></script>
<script src="{{ path('fos_js_routing_js', { callback: 'fos.Router.setData' }) }}"></script>
<script>
var App = angular.module('App', []);
App.controller('TodoCtrl', function($scope, $http) {
// window.alert('hi');
$http.get(Routing.generate('#AppBundle/Resources/public/js/todos.json'))
.then(function(res) {
$scope.todos = res.data;
});
})
</script>
{% endblock %}
{% block body %}
{% verbatim %}
<body ng-app="App" ng-controller="TodoCtrl">
<ul>
<li ng-repeat="todo in todos">
{{todo.text}} - <em>{{todo.done}}</em>
</li>
</ul>
</body>
{% endverbatim %}
{% endblock %}
base.html.twig is here:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>{% block title %}Welcome!{% endblock %}</title>
{% block stylesheets %}{% endblock %}
<link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />
</head>
<body>
{% block body %}
{% endblock %}
{% block javascripts %}
{% endblock %}
</body>
</html>
As you can see the AngularJS code is not in external file, but inside the tag in the twig(HTML) file. Now I get following result :
In the console angular.element($0).scope() returns Child {$id: "003", this: Child, $$listeners: Object, $parent: Object, $$asyncQueue: Array[0]…}
But angular.element($0).scope().todos returns undefined.
What parameter should I give to Routing.generate method in this line $http.get(Routing.generate('#AppBundle/Resources/public/js/todos.json')) ?
I think anyone with experience on FOSjsRouting Bundle should be able to figure it out.
Any geniuses out there?
Try This one on twig {{"{{todo.text}}"}} - {{"{{todo.done}}"}}
I got excited over the prospects of AngularJS. So I started learning it right away. However, to my dismay, AngularJS doesn't render content well on slow internet connections as you can see from the screenshots.
My Flask App basically displays my Linux machines details. I do this by running an ajax call to the server-side code and return json which I then display to the browser using Angular.
Is this a known problem with the framework or is it the way am writing my code. I call Angularjs at the footer as rendered by many users.
Here's a skeleton structure of my html page
<!DOCTYPE html>
<html >
<head>
<title>My flask app</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.min.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap-glyphicons.css') }}">
<!-- font awesome -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/font-awesome.min.css') }}">
<!-- custom-->
<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
</head>
<body ng-app="flaskApp">
<header>
<div class="container">
<h1 class="logo">Flask App</h1>
<strong><nav>
<ul class="menu">
<li>Home</li>
<li>About</li>
</ul>
</nav></strong>
</div>
</header>
<div class="container">
{% block content %}
{% endblock %}
</div>
<!-- Jquery JS-->
<script src="{{ url_for('static', filename='js/jquery-1.11.3.min.js')}}"></script>
<!-- Angular JS-->
<script src="{{ url_for('static', filename='js/angular.js')}}"></script>
<!-- Bootstrap JS -->
<script src="{{ url_for('static', filename='js/bootstrap.min.js')}}"></script>
<!-- Custom JS -->
<!-- <script src="{{ url_for('static', filename='js/admin.js')}}"></script> -->
<script src="{{ url_for('static', filename='js/cmd.js')}}"></script>
</body>
</html>
Take a look at ngClock directive. It is used to prevent Angular from displaying uncompiled templates.
Add this to your CSS file:
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
and include de ng-cloak directive where you want. I usually put it in the body tag.
My index.html file and i tried to load the directive in this html file.
//
{% extends "base.html" %}
{% load staticfiles %}
{% block content %}
<div ng-app="myApp">
<div ng-controller="mainController">
{% verbatim %}
<div class="row">
<div class="column small-12">
<h1 class="up heading text_setting">{{title}}</h1>
</div>
</div>
<edit-cart></edit-cart>
<div class="row">
<div class="small-12 column"><h1 class="up heading">products total <span class="right">3000</span></h1> </div>
</div>
<div class="row">
<div class="small-10 block-center">
<button class="btn-block up heading text_setting ">checkout as guest</button>
<button class="btn-block up heading text_setting">log in/join</button>
</div>
</div>
</div>
{% endverbatim %}
</div>
{% endblock content %}
{% block customjs %}
<!-- common angular js -->
<script src="{% static 'angular_wrapper/shared/angular.min.js' %}"></script>
<script src="{% static 'angular_wrapper/shared/angular-route.js' %}"></script>
<script src="{% static 'angular_wrapper/shared/angular-mock.js' %}"></script>
<!-- app -->
<script src="{% static 'angular_wrapper/shared/app.js' %}"></script>
<!-- controller -->
<script src="{% static 'angular_wrapper/controller/maincontroller.js' %}"></script>
<!-- directives -->
<script src="{% static 'angular_wrapper/directives/directive-editcart.js' %}"></script>
<!-- angular services -->
<script src="{% static 'angular_wrapper/services/service-editcart.js' %}"></script>
{% endblock customjs %}
editcart.html is this
//
<div class="row">
<P>{{move.name}}</P>
<P>{{move.email}}</P>
</div>
and angular code
//
var app = angular.module('myApp', ['ngRoute']);
app.controller('mainController', ['$scope', function($scope) {
$scope.move={
name:'sonu',
email:'sonu.jun3#gmail.com'
};
}]);
//directive
app.directive('editCart', function() {
return {
restrict: 'E',
templateUrl: 'directives/editcart.html'
};
});
console-image attached here
I am creating custom directive for my Web app but couldn't fix this bug.
don't know what is wrong.
I have included all js please help?
As stated in this GitHub issue by Michael Bromley (the second answer from the top), the problem is that Angular is trying to instantiate a template it's not able to find, so it just reload the index.html file which contains the angular script, so the error.
I resolved this issue by indicating in the templateUrl the full path of the file from the root of the public directory (or the one from which you are attempting to take the file from).
So in my case was modules/teams/client/directives/notification.html insted of directives/notification.html.
I don't knwo if it's the right solution, but worked for me.
And what I was really disappointed by was the fact that angular didn't tell me nothing about this missing template, but when I put modules/directive(which is a folder) it gives me back an error.
Really strange behaviour, I expected at least to be informed that the template was not loaded correctly.
I am trying to override Angular tags of {{ }} based on this answer AngularJS with Django - Conflicting template tags, in my django app, but I am not getting it to recognize the override...in base.htm I have:
{% block main_header %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sitename</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css" rel="stylesheet">
<link href="{% static "screen.css" %}" media="screen, projection" rel="stylesheet" type="text/css" />
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script type="text/javascript">
scheduleApp.config(function($interpolateProvider){
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
});
{% block js %}{% endblock %}
</script>
</head>
{% endblock %}
In the template I have:
{% extends 'base.htm' %}
{% block body_block %}
<div ng-app="scheduleApp">
<p>Input something in the input box:</p>
<p>Name : <input type="text" ng-model="name" placeholder="Enter name here"></p>
<h1>Hello
{{ name }} [[ name ]]
</h1>
</div>
{% endblock %}
I get
I get how it ignores the nonexistent {{ name }}, but why is this override not working? Typing into the input does nothing visible. Thank you