I am a newbie on IONIC, angularJS and Django. I tried to host a IONIC project in Django. Django and angularJS are all great framework, but when they get together, it makes me confused.
Q1. How to combine Django URLS and angularJS router? These two mechanism are all used for URL router, should I get ride of angularJS router?
for example:
URLS.py:
urlpatterns = [
url('^login$', views.login),
url('^jobDetail$', views.jobDetail),
]
view.py
def jobDetail(request):
context = RequestContext(request)
return render_to_response('we/JobDetail.html', {}, context)
def login(request):
context = RequestContext(request)
return render_to_response('we/login.html', {}, context)
Yeah, I have get ride of Angular router, and every URL is routed by Django. I think Angular router should be able to work with Django URLs.
angular.module("test", [])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('myJobs', {
url: "/myJobs",
templateUrl: "myJobs.html",
controller: 'myJobsCtl'
})
});
Is there anyone who can provide a sample which can show me how Django urls and angularJS router work together?
Q2, how to assign Django variable to AngularJS?
For example, I have a "test" page. When this page is requested by web browser, the view query a case_list from the DB, and then return the page after rendering the Django template. case state can change after some actions, so it should be a angular variable. (use verbatim to prevent {{case.state}} rendered by Django) Here comes the question. How can I assign Django variable case_list to angularJS controller so that angularJS can render {{case.state}} in front side?
The following thread provides a method which leverages global variable. I haven't tried it, but I think it is not a good idea.
Assign Django variable value to AngularJS
view.py
def test(request):
context = RequestContext(request)
server_data = {
'case_list': InstallFlow.get_list_by_user(request.user)
}
return test_render_to_response(request, 'wechat/myJobs.html', {}, server_data)
test.html:
<div ng-controller="myJobsCtrl">
{% for case in case_list %}
<label class="item item-input">
<span class="input-label">status</span>
<span>{{case.name}}</span>
<span class="input-label">status</span>
{% verbatim %}
<span>{{case.state}}</span>
{% endverbatim %}
</label>
{% endfor %}
</div>